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

主要实现的功能：

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>

 

欢迎关注技术开发分享录：http://fenxianglu.cn/