input 框实时检测输入字符个数

我的梦境 提交于 2020-08-09 16:07:53

HTML : 

<input id="reasonRemark" type="text" class="reasonRemark" placeholder="最多128字"/>
<span><span class="textCount">0</span>/128</span>
<p class="textCountTip" style="color: red"></p>

 JS:

    // 原因输入字符显示还剩多少
    $('.reasonRemark').bind('input propertychange',function(){
        var nowLen = $(this).val().length; // 现在的长度
        if(nowLen < 128){
            $('.textCount').css("color","blue");
            $('.textCount').text(nowLen);
            $('.textCountTip').text("");
        }else {
            $('.textCount').css("color","red");
            $('.textCount').text(nowLen);
            $('.textCountTip').text("超过字数限制,请保持在128个以内!");
        }
    });

页面:

初始页面:

正常输入:

超过限制:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!