限制textarea输入字数，超出就会提示。

stwood007

已于 2023-06-30 14:40:22 修改

阅读量518

点赞数

分类专栏： JS 文章标签：前端 javascript html

于 2023-06-30 14:39:42 首次发布

本文链接：https://blog.csdn.net/stwood007/article/details/131476358

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML代码：

<div class="textarea-group">
    <textarea class="limit_100 advice"></textarea>

    <div class="limit statistics">0/250</div>
</div>

JS代码：

var bind_name = 'input';
if (navigator.userAgent.indexOf("MSIE") != -1) { //（此处是为了兼容IE）
    bind_name = 'propertychange';
}
if (navigator.userAgent.match(/android/i) == "android") {
    bind_name = "keyup";
}

$(".limit_100").bind(bind_name, function() {
    var limitSub = $(this).val().substr(0, 250);
    $(this).val(limitSub); //截取字符长度
    $(this).next('.statistics').html(limitSub.length + '/250'); //获取实时输入字符长度并显示
    if (limitSub.length == 250) {
        $('.limit').css('color', 'red'); //超出指定字符长度标红提示
        alert('你已超出250个字！');
    } else {
        $('.limit').css('color', '#333');
    }
});