Bagaimana cara menonaktifkan properti resizable dari textarea?

2650

Saya ingin menonaktifkan properti resizable dari textarea.

Saat ini, saya dapat mengubah ukuran textareadengan mengklik di sudut kanan bawah textareadan menyeret mouse. Bagaimana saya bisa menonaktifkan ini?

Masukkan deskripsi gambar di sini

html  css 
— pengguna549757
sumber
4
@JDIsaaks - selanjutnya, memungkinkan pengubahan ukuran dalam situasi tertentu dapat merusak tata letak dan printabilit (aspek penting dari proyek mission-critical saat ini).
— random_user_name
10
Terkadang Anda benar-benar menginginkan textarea yang tidak dapat diubah ukurannya. Misalnya, dalam hal ini, ketika Anda (secara kondisional) mengubah textarea menjadi sesuatu yang hanya terlihat seperti label. Terlihat sangat aneh untuk memiliki label dengan cara grabber mengambang acak ke samping.
— neminem
2
Demi semua yang baik, tolong jangan lakukan ini pada textarea yang sebenarnya atau Anda akan mengasingkan pengguna kekuatan Anda. Memutus fungsionalitas peramban inti harus dianggap sebagai opsi nuklir.
— Superluminary

Jawaban:

3532

Aturan CSS berikut ini menonaktifkan perilaku mengubah ukuran untuk textareaelemen:

textarea {
  resize: none;
}

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

Untuk menonaktifkan spesifik textareadengan nameatribut diatur ke foo(yaitu, <textarea name="foo"></textarea>):

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

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

#foo {
  resize: none;
}

The halaman W3C daftar nilai yang mungkin untuk mengubah ukuran batasan: none, baik, horisontal, vertikal, dan mewarisi:

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

Tinjau halaman kompatibilitas yang layak untuk melihat browser apa yang saat ini mendukung fitur ini. Seperti yang dikomentari Jon Hulka, dimensi dapat lebih lanjut ditahan di CSS menggunakan max-width, max-height, min-width, dan min-height.

Sangat penting untuk diketahui:

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

Kutipan oleh Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Donat
sumber
Apakah ada solusi untuk Firefox, Opera dan / atau IE?
— Šime Vidas
6
@ Šime IE dan FF3 (dan sebelumnya) tidak menambahkan ukuran dukungan, sehingga solusi untuk mereka tidak diperlukan. Untuk FF4, solusi ini harusnya berfungsi.
— Donat
24
sesuai davidwalsh.name/textarea-resize - gunakan ukuran: vertikal atau ukuran: horizontal untuk membatasi ukuran ke satu dimensi. Atau gunakan salah satu dari max-width, max-height, min-width dan min-height.
— Jon Hulka
3
Apakah saya satu-satunya yang merasa aneh untuk mengatur ini menggunakan css dan bukan atribut? Mengapa saya tidak dapat kemudian mengatur properti dinonaktifkan atau dicentang atau lainnya menggunakan CSS ...
— Buksy
6
@ Buksy Karena "dinonaktifkan" adalah keadaan, bukan properti visual. Dengan demikian, logis bahwa itu tidak harus diputuskan oleh bahasa penataan .
— Kroltan
105

Saya menemukan dua hal:

Pertama

textarea{resize: none}

Ini adalah CSS 3, yang belum dirilis , kompatibel dengan Firefox 4 (dan lebih baru), Chrome, dan Safari .

Fitur format lain adalah untuk overflow: automenyingkirkan scrollbar kanan, dengan mempertimbangkan atribut dir .

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

  • Internet Explorer 8

Masukkan deskripsi gambar di sini

  • Firefox 17.0.1

Masukkan deskripsi gambar di sini

  • Chrome

Masukkan deskripsi gambar di sini

— Rami Jamleh
sumber
62

CSS 3 memiliki properti baru untuk elemen UI yang akan memungkinkan Anda melakukan ini. Properti adalah properti ukuran . Jadi, Anda akan menambahkan berikut ini ke stylesheet Anda untuk menonaktifkan pengubahan ukuran semua elemen textarea:

textarea { resize: none; }

Ini adalah properti CSS 3; gunakan grafik kompatibilitas untuk melihat kompatibilitas browser.

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

— James Sumners
sumber
Tapi itu akan menjadi pengguna yang sengaja merusak tata letak mereka, daripada pengguna yang hanya perlu mengubah ukurannya texareadan akhirnya membuat sesuatu tidak berfungsi
— Program Redwolf
21

Jika Anda membutuhkan dukungan mendalam, 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;
}
— yevgeniy
sumber
7
Juga gunakan resize:nonedengan solusi ini untuk mencegah gagang muncul di sudut bawah yang tidak berhasil.
— MacroMan
13

Ini dapat dilakukan dalam HTML dengan mudah:

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

Ini bekerja untuk saya. Nilai default trueuntuk draggableatribut.

— Demikianlah dengan Wickramasinghe
sumber
Ini adalah atribut HTML 5, jadi hanya browser yang lebih baru yang akan mendukung. Saya membaca suatu tempat yang didukung IE dari 9 dan seterusnya.
— Antony D'Andrea
4
Ini berfungsi di sebagian besar browser. di setiap browser terbaru.
— Karenanya, Wickramasinghe
itu tidak akan mencegah ukuran teks dari perubahan ukuran
— Mishko Vladimir
@ AntonyD'Andrea Ini tidak berfungsi pada Chrome terbaru: jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

Untuk menonaktifkan properti ukuran, gunakan properti CSS berikut:

resize: none;

  • Anda dapat menerapkan ini sebagai properti gaya sebaris seperti:

    <textarea style="resize: none;"></textarea>

  • atau di antara <style>...</style>tag elemen seperti:

    textarea {
    resize: none;
}
— Webeng
sumber
6

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

The resize menspesifikasikan properti atau tidaknya suatu unsur adalah resizable oleh pengguna.

Catatan: Properti pengubahan ukuran berlaku untuk elemen yang nilai limpahannya dikomputasi adalah sesuatu selain "terlihat".

Ubah ukuran juga tidak didukung di Internet Explorer saat ini.

Berikut adalah berbagai properti untuk mengubah ukuran:

Tanpa Ubah Ukuran:

textarea {
  resize: none;
}

Ubah ukuran kedua cara (vertikal & horizontal):

textarea {
  resize: both;
}

Ubah ukuran secara vertikal:

textarea {
  resize: vertical;
}

Ubah ukuran secara horizontal:

textarea {
  resize: horizontal;
}

Juga jika Anda memiliki widthdan heightdalam CSS atau HTML Anda, itu akan mencegah teks Anda diubah ukurannya, dengan dukungan browser yang lebih luas.

— Alireza
sumber
3

CSS 3 dapat mengatasi masalah ini. Sayangnya itu hanya didukung pada 60% dari browser yang digunakan saat ini.

Untuk Internet Explorer dan iOS Anda tidak dapat mematikan pengubahan ukuran, tetapi Anda dapat membatasi textareadimensi dengan mengatur widthdan height.

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

Lihat Demo

— Oriol
sumber
3

Anda cukup menonaktifkan properti textarea seperti ini:

textarea {
    resize: none;
}

Untuk menonaktifkan pengubahan ukuran vertikal atau horizontal , gunakan

resize: vertical;

atau

resize: horizontal;
— Peter Mortensen
sumber
2

Saya telah membuat demo kecil untuk menunjukkan bagaimana mengubah ukuran properti bekerja. Saya harap ini akan membantu Anda dan orang lain juga.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
Luaskan cuplikan

— Ambuj Khanna
sumber
1

Dengan @style, Anda dapat memberikan ukuran khusus dan menonaktifkan fitur mengubah ukuran (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— Carlos de Jesus Baez
sumber
1
Halo, terima kasih atas jawaban Anda, lain kali silakan format kode.
— Baptiste Mille-Mathias
Ini adalah jawaban berbasis asp.net MVC. Sangat bagus.
— yogihosting
0

Untuk menonaktifkan pengubahan ukuran untuk semua textareas:

textarea {
    resize: none;
}

Untuk menonaktifkan pengubahan ukuran untuk spesifik textarea, tambahkan atribut name,, atau iddan atur untuk sesuatu. Dalam hal ini, namanyanoresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}
— Abk
sumber
-2

Menambahkan !importantmembuatnya berfungsi:

width:325px !important; height:120px !important; outline:none !important;

outline hanya untuk menghindari garis biru pada browser tertentu.

— kaelds
sumber
6
Jangan menyalahgunakan !importantatribut. Tidak ada artinya untuk memperbaiki lebar & tinggi jika atribut CSS resize: nonedapat menghapus fitur mengubah ukuran
— Raptor
1
Bukankah itu !importantjahat?
— Peter Mortensen
Di Chrome saat ini, ini menghentikan pengubahan ukuran horizontal, tetapi saya masih dapat mengubah ukuran teks secara vertikal.
— Advait Junnarkar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.