HTML中textarea输入字数限制

HTML中textarea输入字数限制

实现方法

在HTML中添加一个textarea文本输入框及一个用于文字提示的标签<span>：

<textarea class="textarea-comment" placeholder="想对作者说些什么..." maxlength="1000"></textarea>
<span class="textarea-comment-tip">还可以输入1000个字符</span>

• placeholder属性：显示在文本框中的淡化提示内容；
• maxlength属性：允许输入最大字符长度，配合JS中的监听事件使用。

在JS中添加如下函数：

//封装一个限制字数方法
var checkStrLengths = function (str, maxLength) {
    var maxLength = maxLength;
    var result = 0;
    if (str && str.length > maxLength) {
        result = maxLength;
    } else {
        result = str.length;
    }
    return result;
}
    
//监听评论字数输入
//允许评论内容1000个字符
$(".textarea-comment").on('input propertychange', function () {
    //获取输入内容
    var userDesc = $(this).val();
    //判断字数
    var len;
    if (userDesc) {
        len = checkStrLengths(userDesc, 1000);
    } else {
        len = 0
    }
    //显示字数
    $(".textarea-comment-tip").html('还能输入'+(1000-len)+'个字符');
});

上述代码监听的是class为textarea-comment的标签，当文本内容变化时，会修改class为textarea-comment-tip的标签内容，如果想将class属性替换为id属性，只需要将修改.号为#，同时修改HTML中的class为id即可。

实现效果

按照上述设置，将会实现下述类似效果，作者项目中有用于美化的css，显示效果相对好看很多。

【参考链接】：textarea输入框监听和输入字数限制