Matikan ukuran textarea

117

Saya mencoba menonaktifkan pengubahan ukuran textarea di situs saya; sekarang saya menggunakan metode ini:

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

Saya tahu bahwa metode saya tidak benar dan saya mencari yang lebih baik di JavaScript. Saya seorang pemula, jadi solusi terbaik untuk saya adalah HTML5 atau jQuery.

html textarea Penyihir
sumber

Jawaban:

253

Coba CSS ini untuk menonaktifkan pengubahan ukuran

CSS untuk menonaktifkan pengubahan ukuran untuk semua textarea terlihat seperti ini:

textarea {
    resize: none;
}

Anda malah bisa menetapkannya ke satu textarea berdasarkan nama (di mana HTML textarea):

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

Atau menurut id (di mana HTML textarea):

#foo {
    resize: none;
}

Diambil dari: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

feco
sumber
7
Alih-alih hanya menautkan ke solusi, Anda harus menjelaskannya sedikit di sini. Banyak orang lain yang melihat pertanyaan ini di masa mendatang tidak akan repot-repot mengklik link untuk mendapatkan jawaban. Tambahkan beberapa detail di sini dan saya akan memberi jawaban Anda +1.
Jon Egeland
21

ini akan melakukan pekerjaanmu 

  textarea{
        resize:none;
    }

masukkan deskripsi gambar di sini

Raab
sumber
8

CSS3 dapat mengatasi masalah ini. Sayangnya saat ini hanya didukung di 60% browser yang digunakan .

Untuk IE dan iOS, Anda tidak dapat menonaktifkan pengubahan ukuran tetapi Anda dapat membatasi textareadimensi dengan menyetelnya 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
2

Ini dapat dilakukan dengan mudah hanya dengan menggunakan atribut draggable html

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

Nilai defaultnya benar.

Thusitha Wickramasinghe
sumber
2
Pertanyaannya adalah tentang mengubah ukuran textarea, bukan drag and drop. Jadi seperti yang diharapkan, mengatur atribut ini pada textarea tidak melakukan trik di Chrome (setidaknya).
peveuve
2

Hanya satu opsi tambahan, jika Anda ingin mengembalikan perilaku default untuk semua textarea dalam aplikasi, Anda dapat menambahkan berikut ini ke CSS Anda:

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

Dan lakukan hal berikut untuk mengaktifkan di mana Anda ingin mengubah ukuran:

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

Ingatlah bahwa solusi ini mungkin tidak berfungsi di semua browser yang mungkin ingin Anda dukung. Anda dapat memeriksa daftar dukungan di resizesini: http://caniuse.com/#feat=css-resize

Darlesson
sumber
1

Sesuai pertanyaan, saya telah mencantumkan jawabannya dalam javascript

Dengan Memilih TagName

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

Dengan Memilih Id

document.getElementById('textArea').style.resize = "none";
Mano
sumber
0 
//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

kode di atas berfungsi di sebagian besar browser

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

lakukan keduanya agar berfungsi pada jumlah maksimum browser

tak seorangpun
sumber
0

Ini berhasil untuk saya

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

Kordrad
sumber