js限制HTML输入框的输入

/**
 *  限制输入框的输入
 *  第一个参数：this 
 *  第二个参数：需要限制的规则，传递数组
 */
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <input type="text" onkeyup="standardInput(this,['number','numLenght:1-100'])">
    </div>
    <script>
        function standardInput(that, strategy) {
            var _this = $(that)
            var reValue = _this.val()
            var strategyList = {
                'number': function (val) {
                    return val.replace(/^(0+)|[^\d]+/g, '')
                },
                'numLenght': function (val, length) {
                    var len = length[0]
                    var reVal = val
                    len = len.split("-");
                    if (val == '') {
                        return reVal
                    }
                    if (Number(val) <= Number(len[0])) {
                        reVal = Number(len[0])
                    }
                    if ((len[1] == 0 || len[1]) && Number(val) >= Number(len[1])) {
                        reVal = Number(len[1])
                    }
                    return reVal
                }
            }
            reValue = strategy.reduce(function (prev, rule) {
                var strategyAry = rule.split(":");
                let strategy = strategyAry.shift();
                if (strategyList[strategy]) {
                    prev = strategyList[strategy](prev, strategyAry)
                }
                return prev
            }, reValue)

            _this.val(reValue)
        }
    </script>

</body>

</html>
~~~js
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容