TextArea disebut bidang teks, juga dikenal sebagai area teks, yang merupakan kontrol input teks multi-line dengan bilah gulir, yang sering digunakan dalam formulir pengiriman halaman web. Tidak seperti kontrol teks kotak teks baris tunggal, ia tidak dapat membatasi jumlah kata melalui properti maxlength, dan untuk tujuan ini, metode lain harus dicari untuk membatasi mereka untuk memenuhi persyaratan yang telah ditetapkan.
Praktik yang biasa adalah menggunakan bahasa #Script untuk mengimplementasikan batas input kata pada bidang teks TextArea, yang sederhana dan praktis. Misalkan kita memiliki area teks TextArea dengan ID TXTA1, kita dapat membatasi jumlah kata input pada keyboardnya hingga 10 karakter (karakter Cina atau karakter sudut kecil lainnya):
<script language = "#" type = "text/ecmascript"> window.onload = function () {document.geteLementById ('txta1'). onkeydown = function () {if (this.value.length> = 10) event.returnValue = false; }} </script>Prinsipnya adalah memantau area teks dari nomor ID yang ditentukan dengan memantau acara Keydown. Dapat dibayangkan bahwa ia hanya dapat membatasi input keyboard. Jika pengguna menempelkan teks di clipboard dengan mengklik kanan mouse, itu tidak dapat mengontrol jumlah kata.
Melalui input keyboard, hanya 10 kata yang dapat dimasukkan di area teks di atas. Namun, tujuan kami belum tercapai! Harap salin beberapa teks dengan santai dan cobalah untuk menempelkannya dengan tombol mouse yang tepat untuk melihat apa yang terjadi.
Anda dapat menemukan skrip JS lainnya seperti yang disebutkan di atas di internet. Tidak peduli seberapa baik mereka, prinsip -prinsipnya sama. Memantau input area teks dengan mengoperasikan tombol keyboard seperti Keydown, KeyUp atau Keypress tidak dapat mencegah klik kanan menempel. Karena alasan ini, jika kita harus benar -benar membatasi jumlah kata di TextArea, kita harus menambahkan kunci lain ke halaman web - nonaktifkan klik kanan, yang tidak diragukan lagi membutuhkan overhead tambahan, dan mungkin juga sesuatu yang mungkin tidak mau dilakukan oleh pembuat halaman web. Sebenarnya, ada cara yang lebih mudah untuk menggunakan properti OnPropertyChange.
Onpropertychange dapat digunakan untuk menilai nilai elemen yang telah ditentukan. Ketika nilai elemen berubah, acara penilaian akan dipicu. Ini hanya peduli dengan nilai elemen yang dipantau dan menghindari sumber input, sehingga kita dapat mencapai tujuan membatasi jumlah kata dengan cara yang relatif ideal. Itu termasuk dalam kategori JS dan dapat digunakan dalam perwakilan area kotak bentuk bersarang. Berikut ini adalah gaya dan gaya efek. Anda dapat menguji input seperti di atas. Anda akan menemukan bahwa itu benar -benar mencapai tujuannya: tidak peduli metode apa yang Anda masukkan, ia hanya dapat memasukkan 100 karakter (karakter Cina atau simbol solusi kecil lainnya):
Kode:
<TextArea onPropertyChange = "if (value.length> 100) value = value.substr (0,100)" cols = "60" name = "txta" baris = "8"> </textArea>
Tentu saja, agar lebih aman, program skrip latar belakang yang memproses data formulir juga harus memeriksa data yang dikirimkan lagi. Jika jumlah kata melebihi nomor yang telah ditetapkan, itu akan diproses sesuai, untuk mencapai tujuan benar -benar membatasi jumlah kata. (lebih)
Metode lain untuk mengimplementasikan TextArea untuk membatasi jumlah kata input (termasuk Cina, hanya 10 yang dapat dimasukkan, dan semua kode ASCII dapat dimasukkan)
<script> function check () {var regc = /[^ -~]+ /g; var rege = // d+/g; var str = t1.value; if (regc.test (str)) {t1.value = t1.value.substr (0,10); } if (rege.test (str)) {t1.value = t1.value.substr (0,20); }} </script> <textarea maxlength = "10" id = "t1" onkeyup = "check ();"> </textarea>Ada cara lain:
fungsi textcounter (field, maxlimit) {if (field.value.length> maxlimit) {field.value = field.value.substring (0, maxlimit); } else {document.upbook.remlen.value = maxlimit - field.value.length; }}<name TextArea = kata cols = 19 baris = 5 class = input1 onpropertychange = "textCounter (upbook.words, 50)"> TextArea> Jumlah kata yang tersisa: <input name = remlen type = Text ID = "Remlen" style = "latar belakang-color: #d4d0c8; Batas: 0; Color: Red" Style "=" latar belakang-color: #d4d0c8; Batas: 0; Color: Red "Nilai" Nilai "Latar Belakang: #D4D0C8; Batas: 0; Color: Red" Nilai "Nilai" Nilai 3
fungsi limittextArea (bidang) {maxlimit = 200; if (field.value.length> maxlimit) field.value = field.value.substring (0, maxlimit);}<textarea cols = 50 baris = 10 name = "comment" id = "commentArea" onkeydown = "limittextArea (this)" onkeyup = "limittextArea (ini)" onkeypress = "limittextArea (this)"> </textarea>
title = "Lebar TextArea harus kurang dari 300 karakter." Ini meminta untuk memasukkan jumlah maksimum byte di TextArea.
Misalnya:
<textarea cols = 50 baris = 10 name = "comment" id = "commentArea" onkeydown = "limittextArea (this)" onkeyup = "limittextArea (ini)" onkeypress = "limittextArea (this)"> </textarea>