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

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