企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 87℃ 0评论
目录
[隐藏]

本文内容就如题目所说的,实现一个在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 < 0 && result < minNum) || (step > 0 && result > maxNum)) {
clearTimeout(numberFlag);
return;
}
numberText.value = result;
if(timeInterval <= 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上下箭头的方法:

<style>

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button{

-webkit-appearance: none !important;

margin: 0;

}

input[type="number"]{-moz-appearance:textfield;}

</style>

最终效果展示:

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

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

结束语

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

转载请注明:码云笔记 » input number输入框最大和最小值之间的限制

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址