zoukankan      html  css  js  c++  java
  • 实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

    第一步:了解输入框的一个属性onpropertychange

          单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。

    第二步:限制长度

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

     

    第三步:中文只能输入10个,全ASCII码能够输入20个

    <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>

     

    第四步:兼容性问题

    不知道你有没发现这个属性有一定的兼容性问题,在FF上就不起作用了,要让FF支持onPropertyChange类似的效果

    于是在网上就找到了一个可行性方法: Firefox有个oninput事件效果和onPropertyChange一样

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

     

  • 相关阅读:
    jquery on()方法绑定多个选择器,多个事件
    html中常用的特殊符号(转)
    jQuery自定义动画,animate()包装器方法
    纯CSS下拉菜单
    DIV水平居中的几种方法
    OOXML是什么
    Chrome网络工具总结
    Content-Length错误导致的Servlet下载文件失败问题
    Fiddler操作总结
    WinSCP上传下载过滤指定目录和文件
  • 原文地址:https://www.cnblogs.com/chenly-index/p/3284491.html
Copyright © 2011-2022 走看看