實現textarea限制輸入字數(包含中文只能輸入10個,全ASCII碼可以輸入20個)

第一步:瞭解輸入框的一個屬性onpropertychangeweb

      單擊輸入框發現也會觸發onpropertychange,輸入一個值一樣也會觸發這個事件,這就證實了,只要有屬性的值被修改就會觸發該事件。spa

 

第二步:限制長度orm

     <textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>事件

 

第三步:中文只能輸入10個,全ASCII碼可以輸入20個ip

<script> 
function check() { 
  var regC = /[^ -~]+/g;  //中文正則
  var regE = /\D+/g;       //ASCII正則
  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" onpropertychange="check();"> 
</textarea>ci

 

第四步:兼容性問題input

不知道你有沒發現這個屬性有必定的兼容性問題,在FF上就不起做用了,要讓FF支持onPropertyChange相似的效果it

因而在網上就找到了一個可行性方法: Firefox有個oninput事件效果和onPropertyChange同樣io

<textarea maxlength="10" id="t1" onpropertychange="check();" oninput="check();">
</textarea>
function

相關文章
相關標籤/搜索