Question

我想将textarea限制为500个字符。为此我使用了maxlength属性，但是在不同的浏览器中存在一些兼容性问题。为了解决这个问题，我使用了一个javascript函数

function checkLength(fieldName,limit){

            if(fieldName.value.length >= limit){

                fieldName.value  = fieldName.value.substring(0,limit);
            }
        }

我在两个事件 onKeyDown 和 onKeyUp 上调用此函数。这在某种程度上解决了我的问题，但是当我复制并粘贴长度超过500个字符的字符串时，它会显示所有文本，然后在键盘上修剪为500。有没有办法显示500个字符，而复制粘贴没有闪烁。

Answer 1

如果您愿意使用jquery，那么这里将是解决您整个问题的解决方案：

脚本：

$('textarea').on('paste keyup keydown', function (event) {
 var element = this;
  setTimeout(function () {
   if($(element).val().length > 500)
    {
     if(event.type=="paste"){
      $(element).val($(element).val().substr(0,500))    
     }else{
      $(element).val($(element).val().slice(0,-1));
     }
      alert("excceded more then 500 characters");
    }else{
     return true;
    }
 }, 100);
});

在此处查看演示：http://jsfiddle.net/2Qxh9/

Answer 2

你可以尝试这样的事情：

            <script language="javascript" type="text/javascript">
            function limitText(limitField, limitCount, limitNum) {
                if (limitField.value.length > limitNum) {
                    limitField.value = limitField.value.substring(0, limitNum);
                    alert("your message exceeds the limit");
                } else {
                    limitCount.value = limitNum - limitField.value.length;
                }
            }
            </script>

            <form name="myform" action="">
                <textarea id="t1" name="description" onpropertychange="limitText(this.form.description,this.form.countdown,500);"  OnInput="limitText(this.form.description,this.form.countdown,500);" onKeyDown="limitText(this.form.description,this.form.countdown,500);" rows="20" cols="40">
                </textarea><br>
               <font size="1">(Maximum characters: 500)<br>
                You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
            </form>

Textarea maxlength属性在所有浏览器中都无法正常工作

2 个答案: