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

目录
文章目录隐藏
  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到更好的方法,欢迎大家留言讨论。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » input number输入框最大和最小值之间的限制

2 评论

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

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

发表回复