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?

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

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

206

Dalam CSS ...

textarea {
    resize: none;
}

Jeff Parker
sumber

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

25

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

Imtiaz Ali Baigal
sumber

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

Anda dapat mencoba dengan jQuery juga

$('textarea').css("resize", "none");

Santosh Khalse
sumber

3

Anda harus menggunakan lebih banyak jquery . Anda tidak cukup menggunakannya. :)

Filip Savic

1

Ini adalah meme - misalnya, "Anda harus benar-benar menjatuhkannya dan mencoba jQuery." .

Peter Mortensen

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

Bagaimana cara menonaktifkan properti resizable dari textarea?

Jawaban:

Sangat penting untuk diketahui:

Kode dan browser yang berbeda

HTML

CSS