文本区域最大长度属性无法在所有浏览器中正常工作

Textarea maxlength attribute not working correctly across all browsers

本文关键字：浏览器 常工作 工作 区域 属性 文本      更新时间：2023-09-26

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

function checkLength(fieldName,limit){
            if(fieldName.value.length >= limit){
                fieldName.value  = fieldName.value.substring(0,limit);
            }
        }

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

如果您愿意使用 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/

你可以尝试这样的事情：

            <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>
相关文章：