使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端 > JavaScript > input number输入框最大和最小值之间的限制
码云码云 JavaScript

input number输入框最大和最小值之间的限制

本文内容就如题目所说的，实现一个在number输入框中输入最大和最小值之间的数，用数学关系式表示就是min <= num <= max。当然也许还涉及到step步长的问题，最近的项目中就有这样的一个需求，虽然步长是1，类似的需求有很多，譬如模拟一个拖动条，使得其值限制在最大和最小值之间，此外还可以通过input[type = ‘text’]的输入框加入span标签去实现。

那么如何实现呢？我们立马想到HTML5，即设置input[type=“number”]，设置Min和Max值。很完美，对吧？但是你要是这么认为，那就有麻烦了，你会发现默认的样式很丑，我想要调整一下，但是呢，改变了一下输入框的宽高，额，那样式简直是不能看啊！！！而且这还仅仅只是火狐和谷歌，IE我直接都没看。

于是去问度娘寻求各种方法，发现，问关于Number输入框的大多竟然是去掉上下小箭头，当成一个只能输入数字的控件来使用的。

当然啦，最后我还是找到了自己想要的东西，不过呢，number输入框虽然点击上下小箭头，是能很好的控制输入范围，但是如果用户不适用箭头，而选择输入数字的话，即使超出了范围，它依旧是蠢蠢的接受。这实在是傻的可以！！！

于是继续想，究竟是利用keyup事件，每次键盘弹起的时候都去判下输入框的值有没有超出范围，增加样式和提示信息，可是总觉得不太好，然后想通过设置编辑属性，只读属性，disabled等等，都不合适。后来灵光一现，就get到了一个很好的方法，简直是激动啊，虽然并不难，但是能想到还是要给自己点赞，有时候我们需要换个思路。

实现的方式很简单，当input框获得焦点的时候，就直接让他失去焦点，这样用户就不能输入啦，只能通过点击上下小箭头啦，被自己机智到了。

好了，不卖关子了，步入正题，贴上自己的代码。可以直接copy去查看。部分的代码来自网络。由于项目紧急，实在是很难自己去实现每一个效果。

准备工作

需要使用modernizr-2.6.2.min.js，包含在头部（下载地址：http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js）自己复制保存一下，或者找自己下载。另外一个用到的是jquery库

图片一张：

input number输入框最大和最小值之间的限制

HTML代码

<input type="number" step="1" style = "height:30px;width:100px;" />

Css代码

.numberControlBox {
    display: inline-block;
    height: 26px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: -26px;
}

.ncb_up,
.ncb_down {
    font-size: 0px;
    display: block;
    height: 10px;
    background-color: #f4f4f4;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(230, 230, 230) 50%, rgb(255, 255, 255) 100%);
    width: 24px;
    border: 1px solid #d1d1d1;
    cursor: pointer;
}

.ncb_up {
    margin-bottom: 1px;
}

.numberControlBox .ncb_ico {
    display: block;
    height: 10px;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
}

.ncb_up .ncb_ico {
    background-position: -22px center;
}

.ncb_down .ncb_ico {
    background-position: 1px center;
}

.ncb_btn_hover {
    border: 1px solid #9dc7e7;
    background-color: #dff2fc;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(210, 237, 250) 50%, rgb(255, 255, 255) 100%);
}

.ncb_btn_selected {
    border: 1px solid #6198c2;
    background-color: #aee1fb;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(174, 225, 251) 50%, rgb(255, 255, 255) 100%);
}

JS代码

jQuery.fn.numbertype = function() {
    var numberFlag = null,
    timeInterval = 180,
    isKeyPress = false,
    changeAction = function(step, numberText) {
        var value = numberText.value,
        maxNum = jQuery(numberText).attr('max') * 1,
        minNum = jQuery(numberText).attr('min') * 1,
        result = 0;
        if (value === "" || !/^\d+$/.test(value)) {
            value = 0;
        }
        result = value * 1 + step;
        if ((step & lt; 0 & amp; & amp; result & lt; minNum) || (step & gt; 0 & amp; & amp; result & gt; maxNum)) {
            clearTimeout(numberFlag);
            return;
        }
        numberText.value = result;
        if (timeInterval & lt; = 10) {
            timeInterval = 10;
        } else {
            timeInterval -= 10;
        }
        numberFlag = setTimeout(function() {
            changeAction(step, numberText)
        },
        timeInterval);
    },
    upAction = function(numberText, currentObj) {
        var step = jQuery(numberText).attr('step');
        if (step === undefined || !/^\d+$/.test(step)) {
            step = 1;
        }
        step *= 1;
        if (currentObj !== undefined) {
            jQuery(currentObj).addClass('ncb_btn_selected');
        }
        timeInterval = 180;
        changeAction(step, numberText);
    },
    downAction = function(numberText, currentObj) {
        var step = jQuery(numberText).attr('step');
        if (step === undefined || !/^\d+$/.test(step)) {
            step = 1;
        }
        step *= -1;
        if (currentObj !== undefined) {
            jQuery(currentObj).addClass('ncb_btn_selected');
        }
        timeInterval = 180;
        changeAction(step, numberText);
    },
    construct = function(height, numberText) {
        var numberControlBox = document.createElement('span'),
        upBtn = document.createElement('span'),
        ico_up = document.createElement('span'),
        ico_down = document.createElement('span'),
        downBtn = document.createElement('span');
        numberControlBox.className = "numberControlBox";
        numberControlBox.style.height = height + "px";
        upBtn.className = "ncb_up";
        upBtn.style.height = Math.floor(height / 2 - 3) + "px";
        downBtn.className = "ncb_down";
        downBtn.style.height = Math.floor(height / 2 - 3) + "px";
        ico_up.className = "ncb_ico";
        ico_down.className = "ncb_ico";
        ico_up.style.height = Math.floor(height / 2 - 3) + "px";
        ico_down.style.height = Math.floor(height / 2 - 3) + "px";
        upBtn.appendChild(ico_up);
        downBtn.appendChild(ico_down);
        numberControlBox.appendChild(upBtn);
        numberControlBox.appendChild(downBtn);
        jQuery(upBtn).mousedown(function() {
            upAction(numberText, this);
        }).mouseenter(function() {
            jQuery(this).addClass('ncb_btn_hover');
        }).mouseleave(function() {
            jQuery(this).removeClass('ncb_btn_hover');
            clearTimeout(numberFlag);
        }).mouseup(function() {
            jQuery(this).removeClass('ncb_btn_selected');
            clearTimeout(numberFlag);
        });
        jQuery(downBtn).mousedown(function() {
            downAction(numberText, this);
        }).mouseenter(function() {
            jQuery(this).addClass('ncb_btn_hover');
        }).mouseleave(function() {
            jQuery(this).removeClass('ncb_btn_hover');
            clearTimeout(numberFlag);
        }).mouseup(function() {
            jQuery(this).removeClass('ncb_btn_selected');
            clearTimeout(numberFlag);
        });
        jQuery(numberText).keydown(function(event) {
            var keycode = event.keyCode;
            if (isKeyPress) {
                return false;
            }
            if (keycode === 38) {
                upAction(numberText);
            } else if (keycode === 40) {
                downAction(numberText);
            }
            isKeyPress = true;
        }).keyup(function() {
            clearTimeout(numberFlag);
            isKeyPress = false;
        });
        return numberControlBox;
    };
    this.each(function(index) {
        var numberText = jQuery(this);
        jQuery(construct(numberText.outerHeight(), this)).insertAfter(numberText);
    });
    jQuery(document).mouseup(function() {
        jQuery('.ncb_up').removeClass('ncb_btn_selected');
        jQuery('.ncb_down').removeClass('ncb_btn_selected');
    });
    return this;
}; (function() {
    if (!Modernizr.inputtypes.number) {
        jQuery('input[type=number]').numbertype();

    }
})();
var defa = {
    "min": 1,
    "max": 15,
    "value": 3
}
$('input[type=number]').attr({
    "min": defa.min,
    "max": defa.max,
    "value": defa.value
}) $('input[type=number]').focus(function() {
    $(this).blur();
})

关于min,max和默认的value值没有在input标签中写的原因是因为这是后台管理系统中可以设置的值，因为要用户交互。

顺便附上去掉number上下箭头的方法：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}/

最终效果展示：

input number输入框最大和最小值之间的限制

到此为止，number输入框已禁止用户手工输入，只能通过点击上下按钮去改变输入框值的大小，大小范围1<=num<=15，并且调整input框的宽高也是很完美哒。

结束语

完整代码已撸完，其实并不是那么难，只要多想一下，换个思路就会get到更好的方法，欢迎大家留言讨论。

「点点赞赏，手留余香」

赞 3 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

标签：
声明：
本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创，仅限用于学习和研究。
码云笔记 » input number输入框最大和最小值之间的限制

码云 会员

分享到：

相关推荐

2 评论

  1. 假如初始值是1，最小值是1，最大值支持100，你确定要点100下吗？

    1. 这个区间没有测试，那会儿只是为了赶项目，你可以下去试试

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们