Pertanyaan Bagaimana cara menonaktifkan properti textarea yang dapat diubah ukurannya?


Saya ingin menonaktifkan properti resizable dari textarea.

Saat ini, saya dapat mengubah ukuran a textarea dengan mengklik sudut kanan bawah textarea dan menyeret mouse. Bagaimana saya bisa menonaktifkan ini?


2154
2018-03-08 16:15


asal


Jawaban:


Aturan CSS berikut menonaktifkan perilaku pengubahan ukuran untuk textarea elemen:

textarea {
  resize: none;
}

Untuk menonaktifkannya untuk beberapa (tetapi tidak semua) textareas, ada a beberapa opsi.

Untuk menonaktifkan spesifik textarea dengan name atribut disetel ke foo (yaitu., <textarea name="foo"></textarea>):

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

Atau, menggunakan an id atribut (yaitu, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Itu Halaman W3C daftar nilai yang mungkin untuk mengubah ukuran pembatasan: tidak ada, baik, horizontal, vertikal, dan mewarisi:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Tinjau yang layak halaman kompatibilitas untuk melihat browser apa yang saat ini mendukung fitur ini. Seperti yang dikatakan Jon Hulka, dimensi bisa lebih terkendali dalam CSS menggunakan max-width, max-height, min-width, dan min-height.

Sangat penting untuk diketahui:

Properti ini tidak melakukan apa-apa kecuali properti overflow adalah sesuatu selain yang terlihat, yang merupakan default untuk sebagian besar elemen. Jadi umumnya untuk menggunakan ini, Anda harus mengatur sesuatu seperti luapan: gulir;

Kutipan oleh Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2861
2018-03-08 16:17



Di CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Saya menemukan 2 hal

pertama

textarea{resize:none}

ini adalah css3 yang belum dirilis kompatibel dengan Firefox4 + chrome dan safari 

fitur format lain adalah untuk overflow: otomatis untuk menyingkirkan scrollbar yang tepat dengan mempertimbangkan dir atribut

kode dan browser yang berbeda

Html dasar

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Beberapa browser

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • krom

enter image description here


91
2017-12-27 20:58



CSS3 memiliki propery baru untuk elemen UI yang memungkinkan Anda melakukan ini. Properti adalah mengubah ukuran properti. Jadi Anda akan menambahkan berikut ke stylesheet Anda untuk menonaktifkan mengubah ukuran semua elemen textarea:

textarea { resize: none; }

Ini adalah properti CSS3; Gunakan bagan kompatibilitas untuk melihat kompatibilitas browser.

Secara pribadi, saya akan merasa sangat menjengkelkan untuk mengubah ukuran dinonaktifkan pada elemen textarea. Ini adalah salah satu situasi di mana perancang mencoba "menghancurkan" klien pengguna. Jika desain Anda tidak dapat mengakomodasi textarea yang lebih besar, Anda mungkin ingin mempertimbangkan kembali bagaimana desain Anda bekerja. Setiap pengguna dapat menambahkan textarea { resize: both !important; } ke stylesheet pengguna untuk mengesampingkan preferensi Anda.


57
2018-03-08 16:35



<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19



Jika Anda membutuhkan dukungan yang dalam, Anda dapat menggunakan teknik sekolah lama

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

18
2018-02-12 12:14



Ini bisa dilakukan dengan mudah html

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

Ini bekerja untuk saya. Nilai default adalah true untuk draggable atribut.


9
2017-07-21 05:18



Anda cukup menggunakan: resize: none; di CSS Anda.

Itu ubah ukuran properti menentukan apakah suatu elemen dapat diubah ukuran atau tidak   oleh pengguna.

catatan: Properti pengubahan ukuran berlaku untuk elemen yang dihitung limpahan   nilai adalah sesuatu selain "terlihat".

Juga ubah ukuran tidak didukung di IE saat ini.

Berikut ini beberapa properti untuk diubah ukurannya:

Tanpa Ubah Ukuran:

textarea { 
  resize: none; 
}

Ubah ukuran dua arah (secara vertikal & horizontal):

textarea { 
  resize: both; 
}

Ubah ukuran secara vertikal:

textarea { 
  resize: vertical; 
}

Ubah ukuran secara horizontal:

textarea { 
  resize: horizontal; 
}

Juga jika Anda punya width dan height dalam CSS atau HTML Anda, itu akan mencegah ukuran teks Anda diubah, dengan dukungan browser yang lebih luas.


4
2018-06-01 13:11



Untuk menonaktifkan properti pengubahan ukuran, gunakan properti CSS berikut:

resize: none;
  • Anda dapat menerapkan ini sebagai properti bergaya inline seperti:

    <textarea style="resize: none;"></textarea>
    
  • atau di antaranya <style>...</style> tag elemen seperti ini:

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43



CSS3 dapat memecahkan masalah ini. Sayangnya itu hanya didukung 60% dari peramban yang digunakan sekarang.

Untuk IE dan iOS Anda tidak dapat mengubah ukuran tetapi Anda dapat membatasi textarea dimensi dengan mengaturnya width dan height.

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

Lihat Demo


2
2017-10-30 23:26