[前端] 输入统计超出禁止输入

主要实现的功能：

1、进行实时的输入统计

2、超出最大值提示并禁止输入

效果：

HTML布局：

<div class="edit-input">
    <input type="text" placeholder="请输入视频标题" class="name-inp">
    <div class="inp-numb"><var>0</var>/<var>16</var></div>
</div>

JS脚本：

<script>
    // 统计函数  function inputTotal(inputEle,totalEle,varEle) {
        $('body').on('input', inputEle, function() {
            var length = ($(this).val()).length;
            var maxLenght = parseInt($(this).siblings(totalEle).find(varEle).last().text());

            // 超出提示，并禁止输入  if(length > maxLenght) {

                // 有效值  var validVal = ($(this).val()).substr(0, maxLenght);
                $(this).val(validVal);

                length = maxLenght;

                alert('已经到最大值了！');

                // 变红  $(this).siblings(totalEle).css('color', 'red').find(varEle).css('color', 'red');
            } else {
                // 恢复  $(this).siblings(totalEle).css('color', '#ccc').find(varEle).css('color', '#ccc');
            }

            // 计算值  $(this).siblings(totalEle).find(varEle).first().text(length);
        });
    }

    // 请输入昵称  inputTotal('.name-inp', '.inp-numb', 'var');
</script>

谢谢关注！