Menguatkuasakan Panjang Maksimum pada HTML Textareas Menggunakan JavaScript Bagaimana anda boleh mengenakan panjang maksimum pada elemen dalam HTML menggunakan JavaScript tulen tanpa menggunakan jQuery? Soalan ini timbul apabila anda ingin mengawal jumlah input pengguna dan mengelakkan limpahan teks.</p> <p>Satu kaedah melibatkan pengendalian peristiwa penekanan kekunci menggunakan atribut onkeypress dan onkeyup dalam setiap kawasan teks:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> function imposeMaxLength(event, object, maxLength) { return (object.value.length <= maxLength) || (event.keyCode == 8 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 40)); } Salin selepas log masuk Walau bagaimanapun, menambah atribut ini secara manual pada setiap kawasan teks boleh menjadi membosankan. Berikut ialah pendekatan alternatif yang mengautomasikan proses: window.onload = function() { var txts = document.getElementsByTagName('TEXTAREA'); for (var i = 0, l = txts.length; i < l; i++) { if (/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { var func = function() { var len = parseInt(this.getAttribute("maxlength"), 10); if (this.value.length > len) { alert('Maximum length exceeded: ' + len); this.value = this.value.substr(0, len); return false; } } txts[i].onkeyup = func; txts[i].onblur = func; } } };Salin selepas log masuk Skrip ini dimulakan pada pemuatan halaman dan berulang melalui semua elemen dalam dokumen. Untuk setiap kawasan teks dengan atribut panjang maksimum berangka, ia mentakrifkan fungsi yang menyemak sama ada teks melebihi had. Jika ya, ia memberi amaran kepada pengguna dan memotong input kepada panjang maksimum. Dengan memperuntukkan fungsi ini kepada acara onkeyup dan onblur, sekatan panjang maksimum digunakan secara automatik tanpa perlu melampirkan pengendali acara secara manual.</p>
