Penjelasan terperinci tentang kelakuan aneh atribut maxlength dalam kemahiran textarea_javascript

HTML5 telah membawa banyak perubahan pada bentuk, seperti panjang maksimum, yang akan kita bincangkan hari ini Atribut ini boleh mengehadkan bilangan maksimum aksara yang dimasukkan ke dalam kotak input dipotong secara automatik berdasarkan bilangan aksara.

Baru-baru ini saya menerima permintaan untuk mengehadkan pengguna untuk memasukkan maksimum 600 aksara (aksara dan huruf Cina tidak dibezakan), dan kandungan yang ditampal juga mesti dipotong secara automatik Selepas 600 aksara dimasukkan, input tidak boleh dibuat.

Perkara pertama yang saya fikirkan ialah panjang maksimum, yang pada asasnya memenuhi keperluan, tetapi masih terdapat beberapa tingkah laku pelik.

Lihat kod di bawah:

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

Kod di atas mengehadkan bilangan aksara input kepada 600 dan memantau input pengguna melalui oninput tidak digunakan kerana keydown hanya boleh memantau input papan kekunci pengguna dan tidak mempunyai respons untuk menampal. . . onput boleh buat.

Pada masa ini, selepas memasukkan 600 patah perkataan secara langsung, anda tidak boleh lagi memasukkan beberapa dan memasukkan beberapa lagi, dan prestasi akan menjadi normal. Yang peliknya ialah jika anda menampal banyak teks ke dalam kawasan teks, ia akan dipotong secara automatik kerana kewujudan panjang maksimum Pada masa ini, terdapat tepat 600 aksara dalam kawasan teks, jika anda memadamkan beberapa aksara dan kemudian cuba masukkan sekali lagi, anda akan dapati:

Sial, saya tidak boleh menaip! ! ! Padamkan lagi dan anda boleh terus menaip, tetapi! ! ! Apabila saya memasukkan kurang daripada 600 aksara, saya tiba-tiba tidak dapat memasukkan lagi! ! !

Ini berlaku di bawah chrome dan mesin android saya. . Sebabnya belum diketahui lagi. Selepas menguji input, keadaan ini tidak akan berlaku, dan jika nilai atribut panjang maksimum lebih kecil, keadaan ini tidak akan berlaku, seperti 10. . .

Dalam kes ini, panjang maksimum tidak boleh dipercayai. Hanya tulis lebih banyak kod sendiri Memandangkan oninput sangat fleksibel, gunakannya.

Ubah suai kod, alih keluar atribut panjang maksimum bagi textarea dan gunakan input untuk memantau nilai textarea Jika melebihi 600, ia akan dipotong secara automatik, mewujudkan ilusi bahawa input adalah mustahil.

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

Jika anda tidak bimbang, anda boleh terus memantau acara kekunci dan menghalang acara lalai selepas memasukkan lebih daripada 600 aksara Walau bagaimanapun, terdapat beberapa kekunci yang tidak boleh dilarang: padam ruang belakang dan pengembalian kereta:

.

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8 dan ke bawah tidak menyokong atribut panjang maksimum atau onput, tetapi ia mempunyai kaedah yang lebih berkuasa: onpropertychange.

Berikut menerangkan cara textarea melaksanakan atribut panjang maksimum melalui satu hujung kod

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form>