当前位置：码云笔记 > 前端 > input number输入框最大和最小值之间的限制
码云码云 前端

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

AI 概述
HTML 代码Css 代码JS 代码结束语 本文内容就如题目所说的，实现一个在number输入框中输入最大和最小值之间的数，用数学关系式表示就是min <= num <= max。当然也许还涉及到step步长的问题，最近的项目中就有这样的一个需求，虽然步长是 1，类似的需求有很多，譬如模拟一个拖动条，使得其值限制在...
目录
文章目录隐藏
  1. HTML 代码
  2. Css 代码
  3. JS 代码

本文内容就如题目所说的，实现一个在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到更好的方法，欢迎大家留言讨论。

以上关于input number输入框最大和最小值之间的限制的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 3 赏

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

微信微信 支付宝支付宝

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

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » input number输入框最大和最小值之间的限制

码云 SVIP

分享到：

相关推荐

2 评论

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

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

发表回复