Javascript限制多行文本输入框的字符数

对于单行文本框，我们可以通过设置属性maxlength来限制可输入的最多字符数：

< input  type ="text"  maxlength ="5"   />

对于多行文本框，如果想限制最多可输入字符数，必须使用Javascript脚本来达到目的。

 

1. 最初的解决方案：

< textarea  rows ="4"  cols ="20"  onkeydown ="return maxlength(this, 5);" ></ textarea >

 

function  maxlength(node, maxcount) {
     if  (node.value.length  >=  maxcount) {
         return   false ;
    }
     return   true ;
}

 

上面的解决办法虽然能够限制最多可输入字符数为 5 个，但是当已经输入 5 个字符后，就不会响应任何的键盘操作了，

这将会惹恼那些想通过“Delete”或“Backspace”按键修改字符串的用户。

 

2. 改进的解决方案：

< textarea  rows ="4"  cols ="20"  onkeydown ="return maxlength2(event, 5);" ></ textarea >

 

function  maxlength2(event, maxcount) {
     //  以下三步操作是为了兼容FF和IE
     var  event  =  event  ||  window.event;
     var  target  =  event.target  ||  event.srcElement;
     var  keyCode  =  event.charCode  ||  event.keyCode;
     //  8 - backspace , 46 - delete
     if  (keyCode  !=   8   &&  keyCode  !=   46 ) {
         if  (target.value.length  >=  maxcount) {
             return   false ;
        }
    }
     return   true ;
}

虽然这样可以满足一定的需求，但是如果用户在输入最大字符后想按“Enter”等按键呢。

考虑到onkeydown是在键盘按下，但是文字尚未输入文本框中，而onkeyup时文字已经输入文本框，

所以我们可以先允许用户输入，然后进行字符串截断的策略。

3. 先输入字符后截断字符的解决办法：

< textarea  rows ="4"  cols ="20"  onkeyup ="return maxlength3(this, 5);" ></ textarea >

function  maxlength3(node, maxcount) {
     if  (node.value.length  >  maxcount) {
        node.value  =  node.value.substr( 0 , maxcount);
    }
}

代码下载