为textarea 增加 maxlength 屬性

最新推荐文章于 2018-05-22 11:32:14 发布

iteye_8412

最新推荐文章于 2018-05-22 11:32:14 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏： Js 文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_8412/article/details/81930352

Js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了几种限制HTML textarea输入字符数量的方法，包括使用onkeyup事件实时限制、定义maxlength属性配合JavaScript进行验证，以及通过禁用右键防止粘贴超过限制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果只是单纯地想限制 textarea 中的字數，可用：

或

也可以这样子：

首先在textarea 上定义一个 maxlength 属性：
<textarea rows="2" cols="20" maxlength="10" onkeydown="checklength(this);"></textarea>
然后添加这个方法就行了！
function checklength(obj) {
        var max = obj.maxlength;
        if(max == null || max == "" || max == undefined) {
            return;
        }
        if(obj.value.length > max) {
            alert("请不要超过最大长度:" + max);
            obj.value=obj.value.substring(0,(max-1));
            return;
        }
    }

还可以这样子：

在textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法，解决办法就是当textarea获取焦点时把鼠标右键失效，失去焦点时再恢复鼠标右键
这个方法从功能上解决了textarea的maxLength问题，但还不是很完美，在输入超过maxLength的字符后光标会有闪烁，因为是截取回填，没有像input的maxLength那样真正不让输入

  };
</script>

<textarea id="area" maxLength="10"   onkeyup="textarea_maxlen.isMax()"
  onfocus="textarea_maxlen.disabledRightMouse()"  onblur="textarea_maxlen.enabledRightMouse()">
</textarea>

还是第一种方法方便有效