• textarea中限制输入字符长度


    要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有:

       1.  

    <textarea name="A" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'>aaaa</textarea>

       2. 我们也可以将判断写在函数中,如果输入的长度超过显示,就显示提示信息,如下:
           <form name = "testform">
             <textarea name="A" cols="45" rows="2" >aaaa</textarea>
               <input type="button" onclick = "checkValid()" value= "提交">
              </form>
    <script language="javascript">
    function checkValid()
    {
     var a = document.testform.A;
     
     if(a.value.length > 20)
     {
      alert("输入的备注框长度不能超过20个字符!");
      return false;
     }
     return true;
    }

            3.  上述两种方法无法判断如果使用copy后的准确字数,可以使用onpropertychange属性。

    onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的 value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):

    代码:

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

            4.  在<textarea>的onKeyup,onKeyDown和onPaste事件中调用js方法,例:

              <tr align="center">
                     还可以输入<span id="validNum">140</span>字</td>
            </tr>
            <tr  align="center">
                <td>
                    <textarea name="talkTopic" id="talkTopic" rows=4 cols="50" maxlength='140' onKeyDown="checkLength()"
                     onKeyUp="checkLength()" onPaste="checkLength()"></textarea>
                </td>
            </tr>

          function checkLength(){
            var value = document.getElementById("talkTopic").value;
            if(value.length>140){
                document.getElementById("talkTopic").value=document.getElementById("talkTopic").value.substr(0, 140);
            }else{
                document.getElementById("validNum").innerHTML = 140 - value.length;
            }
        }

         在checkLength()中,验证textarea的长度,如果超过了限制的长度,则取前140个字符。

  • 相关阅读:
    VUE学习一,安装及Hello World
    609. 在系统中查找重复文件
    451. 根据字符出现频率排序
    面试题 10.02. 变位词组
    142. 环形链表 II
    面试题 16.24. 数对和
    151. 翻转字符串里的单词
    1207. 独一无二的出现次数
    80. 删除排序数组中的重复项 II
    1365. 有多少小于当前数字的数字
  • 原文地址:https://www.cnblogs.com/milantgh/p/3705423.html
Copyright © 2020-2023  润新知