实时计算用户输入的字符数

某输入框限定最多输入15（或其他数字）个字符并实时计算用户输入的字符数，显示出可输入字符数。右下角数字表示允许长度，数字可到负，到负标红。效果如下图：

html代码如下：

<div class="user-info-detail">
    <p>
        <span class="item-name"><i class="iconfont icon-dian"></i>用户昵称</span>
        <input class="user-name" type="text" placeholder="支持中英文、数字、符号"/>
        <span class="num"></span>
    </p>
</div>

js代码如下：

showCharNum();
function showCharNum(){
    $('.user-info-detail input[type=text]').on('keyup change',function(){
        var num = $(this).val().length;
        $(this).next().removeClass('tip');
        if(num>15){
            $(this).next().addClass('tip');
        }
        $(this).next().html(15-num);
    }).trigger("keyup");
}

scss代码如下：

.user-info-detail{
        margin: 0 30px;
        p{
          position: relative;
          height: 40px;
          line-height: 40px;
          margin-bottom: 18px;
          font-size: 14px;
          .item-name{
            display: inline-block;
            width: 72px;
            margin-right: 18px;
            color: #999;
            text-align: right;
            .icon-dian{
              margin-right: 2px;
              color: #f63e53;
              font-size: 14px;
            }
          }
          .num{
            position: absolute;
            right: 10px;
            top: 0;
            font-size: 12px;
            color: #999;
            &.tip{
              color: #f63e53;
            }
          }
          input[type="text"]{
            width: 805px;
            height: 40px;
            padding-left: 10px;
            padding-right: 40px;
            box-sizing: border-box;
            color: #333;
            background: #f5f5f5;
            border: transparent;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
          }
}

版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/qq_36584352/article/details/80181044