TEXTAREA 最大长度检查

引言

本文档描述了如何限制 textarea 允许输入的字符数。

背景

TextBox 具有 maxlength 属性来限制允许的字符数。但是 TextArea 没有属性来控制这一点。我们将使用简单的 javascript 来控制它。

使用代码

我们将编写两个函数处理程序来处理按键和粘贴事件。

//
// Any source code blocks look like this

  function maxLength(field,maxChars)
 {
       if(field.value.length >= maxChars) {
          event.returnValue=false;
          return false;
       }
 }  

 function maxLengthPaste(field,maxChars)
 {
       event.returnValue=false;
       if((field.value.length +  window.clipboardData.getData("Text").length) > maxChars) {
         return false;
       }
       event.returnValue=true;
 }

//

maxLength() 将用于 keypress 事件，maxLengthPaste 将用于 onPaste 事件。

将此代码添加到您的 html 或生成此代码。

<textarea rows="5" cols="6" onKeyPress='return maxLength(this,"30");' onpaste='return maxLengthPaste(this,"30");'></textarea>

它不会允许您输入超过 30 个字符，同时也不会允许您粘贴超过 30 个字符。

您可以修改代码以提醒用户重新检查他们的数据。只需在 return false 语句之前插入一个警报消息即可。

//
// Any source code blocks look like this

  function maxLength(field,maxChars)
 {
       if(field.value.length >= maxChars) {
          event.returnValue=false; 
          alert("more than " +maxChars + " chars");
          return false;
       }

 }  

 function maxLengthPaste(field,maxChars)
 {
       event.returnValue=false;
       if((field.value.length +  window.clipboardData.getData("Text").length) > maxChars) {
         alert("more than " +maxChars + " chars");
         return false;
       }
       event.returnValue=true;
 }

//

如果您不想将字段作为参数传递给函数，您可以从事件对象中获取它。

var field=  event != null ? event.srcElement:e.target;

您可以参考我的另一篇文章“更改当前焦点元素的背景颜色”来分配全局事件处理程序。在这种情况下，您不需要将 maxLength 作为参数传递，将其作为属性，以便您可以注册 textarea 的全局处理程序并使用该字段的 maxLength 属性来验证长度。

<script language="javascript">
function attachEvent(name,elementName,callBack) {
    var element = elementName;
    if(typeof elementName == 'string') 
      element = document.getElementById(elementName);
    }
    if (element.addEventListener) {
      element.addEventListener(name, callBack,false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, callBack);
    }
}
function maxLength()
 {
 
       var field=  event != null ? event.srcElement:e.target;
       if(field.maxChars  != null) {  
         if(field.value.length >= parseInt(field.maxChars)) {
           event.returnValue=false; 
           alert("more than " +field.maxChars + " chars");
           return false;
         }
       }
 }  

 function maxLengthPaste()
 {
       event.returnValue=false;
       var field=  event != null ? event.srcElement:e.target;
       if(field.maxChars != null) {
         if((field.value.length +  window.clipboardData.getData("Text").length) > parseInt(field.maxChars)) {
           alert("more than " +field.maxChars + " chars");
           return false;
         }
       }
       event.returnValue=true;
 }
</script>

生成或创建此 html

<textarea rows="5" cols="6" maxLength="30" id="textarea1"></textarea>

<script language="javascript">
  attachEvent("keypress","textarea1",maxLength);
  attachEvent("paste","textarea1",maxLengthPaste);
</script>


or you can assign gloabl handler
<script language="javascript">

function setTextAreaListner(eve,func) {
   var ele = document.forms[0].elements;
   for(var i = 0; i <ele.length;i++) {
    element = ele[i];
    if (element.type) {
      switch (element.type) {
        case 'textarea':
        attachEvent(eve,element,func);
       }
     }
  }
}
</script>
<script language="javascript">
 setTextAreaListner("keypress",maxLength);
 setTextAreaListner("paste",maxLengthPaste);
</script>

有关 netscape 剪贴板操作，请参考此论坛

http://www.gamedev.net/community/forums/topic.asp?topic_id=281951

.