number输入框
最后更新于：2022-04-01 11:55:07
有时我们需要实现一个有最大值和最小值的输入问题，当然也许还涉及到step步长的问题，最近的项目中就有这样的一个需求，虽然步长是1，类似这样的需求有很多中实现方式，譬如模拟一个拖动条，使得其值限制在最大和最小值之间，此外还可以通过input[type = ‘text’]的输入框加入span标签去实现。
but，我们有html5呀，我看到这个问题，第一个想法就是input[type = “number”]，设置Min和Max值。很完美，对吧？
就在这时，问题出现了，首先默认的样式很丑，我想要调整一下，但是呢，改变了一下输入框的宽高，额，那样式简直是不能看啊！！！而且这还仅仅只是火狐和谷歌，IE我直接都没看。
于是去百度各种方法，发现，问关于Number输入框的大多竟然是去掉上下小箭头，当成一个只能输入数字的控件来使用的。
当然啦，最后我还是找到了自己想要的东西，不过呢，number输入框虽然点击上下小箭头，是能很好的控制输入范围，但是如果用户不适用箭头，而选择输入数字的话，即使超出了范围，它依旧是蠢蠢的接受。这实在是傻的可以！！！
于是继续think，究竟是利用keyup事件，每次键盘弹起的时候都去判下输入框的值有没有超出范围，增加样式和提示信息，可是总觉得不太好，然后想通过设置编辑属性，只读属性，disabled等等，都不合适。后来灵光一现，就get到了一个很好的方法，简直是激动啊，虽然并不难，但是能想到还是要给自己点赞，有时候我们需要换个思路。
实现的方式很简单，当input框获得焦点的时候，就直接让他失去焦点，这样用户就不能输入啦，只能通过点击上下小箭头啦，被自己机智到了。
OK，废话了这么多，贴上自己的代码。可以直接下下去查看哟。部分的代码来自网络。不过项目紧急，实在是很难自己去实现每一个效果。
需要使用modernizr-2.6.2.min.js，包含在头部（下载地址：[http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js](http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js)）自己复制保存一下，or找自己下载。另外一个用到的是jquery-1.9.1.min.js.
图片一张
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<style>
.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%);
}
</style>
<body>
<input type="number" step="1" style = "height:30px;width:100px;" />
</body>
</html>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
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();
})
</script>
~~~
关于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框的宽高也是很完美哒····
OK，我继续写其他代码了！！！