Javascript限制多行文本输入框中字符数的代码分享

发布时间:2020-11-18编辑:脚本学堂
本文介绍下,用javascript限制在多行文本框中输入的字符数的方法,有需要的朋友参考下。

在html页面中,文本框分为单行文本框与多行文本框,对于单行文本框,可以通过设置属性maxlength来限制可输入的最多字符数,例如:
 

复制代码 代码示例:
<input type="text" maxlength="5" />
 

对于多行文本框,如果想限制最多可输入字符数,则要借助javascript来实现。
 
方法1,
 

复制代码 代码示例:
<textarea rows="4" cols="20" onkeydown="return maxlength(this, 5);"></textarea>
<script>
function maxlength(node, maxcount) {
    if (node.value.length >= maxcount) {
        return false;
    }//by www.jb200.com
    return true;
}
</script>

以上方法可以够限制最多可输入字符数为 5 个,超出字符限制后,不再响应任何的键盘操作。
 
方法2,对方法1的改进:
 

复制代码 代码示例:
<textarea rows="4" cols="20" onkeydown="return maxlength2(event, 5);"></textarea>
<script>
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;
        }
    } //by www.jb200.com
    return true;
}
</script>

此方法可以满足一定的需求,但是如果用户在输入最大字符后想按“Enter”等按键呢。
考虑到onkeydown是在键盘按下,但是文字尚未输入文本框中,而onkeyup时文字已经输入文本框,
所以可以先允许用户输入,然后进行字符串截断的策略。
 
下面来介绍方法3.
思路:先输入字符,然后截断字符。
代码如下:
 

复制代码 代码示例:
<textarea rows="4" cols="20" onkeyup="return maxlength3(this, 5);"></textarea>
<script>
function maxlength3(node, maxcount) {
    if (node.value.length > maxcount) {
        node.value = node.value.substr(0, maxcount);
    }
}
</script>

推荐使用方法3,简洁明了,用户体验也好。