ปิดการปรับขนาด textarea

ฉันกำลังพยายามปิดการปรับขนาด textarea ในไซต์ของฉัน ตอนนี้ฉันใช้วิธีนี้:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

ฉันรู้ว่าวิธีการของฉันไม่ถูกต้องและฉันกำลังค้นหาวิธีที่ดีกว่าใน JavaScript ฉันเป็นมือใหม่ดังนั้นทางออกที่ดีที่สุดสำหรับฉันคือ HTML5 หรือ jQuery

ลองใช้ CSS นี้เพื่อปิดการปรับขนาด

CSS เพื่อปิดใช้งานการปรับขนาดสำหรับพื้นที่ข้อความทั้งหมดมีลักษณะดังนี้:

textarea {
    resize: none;
}

คุณสามารถกำหนดให้เป็นพื้นที่ข้อความเดียวแทนได้โดยใช้ชื่อ (โดยที่ textarea HTML อยู่):

textarea[name=foo] {
    resize: none;
}

หรือตาม id (โดยที่ textarea HTML คือ):

#foo {
    resize: none;
}

นำมาจาก: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

สิ่งนี้จะทำงานของคุณ

  textarea{
        resize:none;
    }

CSS3 สามารถแก้ปัญหานี้ได้ น่าเสียดายที่ปัจจุบันรองรับเบราว์เซอร์ที่ใช้แล้วเพียง60%เท่านั้น

สำหรับ IE และ iOS คุณไม่สามารถปิดปรับขนาด แต่คุณสามารถ จำกัดtextareaมิติโดยการตั้งค่าของมันและwidthheight

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

ดูการสาธิต

สามารถทำได้ง่าย ๆ โดยใช้แอตทริบิวต์ที่ลากได้ html

<textarea name="mytextarea" draggable="false"></textarea>

ค่าเริ่มต้นเป็นจริง

ตัวเลือกพิเศษเพียงตัวเดียวหากคุณต้องการเปลี่ยนพฤติกรรมเริ่มต้นสำหรับพื้นที่ข้อความทั้งหมดในแอปพลิเคชันคุณสามารถเพิ่มสิ่งต่อไปนี้ใน CSS ของคุณ:

textarea:not([resize="true"]) {
  resize: none !important;
}

และทำสิ่งต่อไปนี้เพื่อเปิดใช้งานในตำแหน่งที่คุณต้องการปรับขนาด:

<textarea resize="true"></textarea>

โปรดทราบว่าโซลูชันนี้อาจใช้ไม่ได้กับทุกเบราว์เซอร์ที่คุณอาจต้องการรองรับ คุณสามารถตรวจสอบรายชื่อการสนับสนุนได้resizeที่นี่: http://caniuse.com/#feat=css-resize

ตามคำถามฉันได้ระบุคำตอบไว้ในจาวาสคริปต์แล้ว

โดยการเลือก TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

โดยการเลือก Id

document.getElementById('textArea').style.resize = "none";

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

โค้ดด้านบนใช้ได้กับเบราว์เซอร์ส่วนใหญ่

//HTML:
<textarea id='textarea' draggable='false'></textarea>

ทำทั้งสองอย่างเพื่อให้มันทำงานบนเบราว์เซอร์สูงสุด

นี่ใช้ได้สำหรับฉัน

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>