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

来源：互联网发布：苹果cms自带采集插件编辑：程序博客网时间：2024/05/16 02:13

主要实现的功能：

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>

谢谢关注！

0 0