Question

jquery 如何实现文本框只输入数字，并且可以手写，也可以上下选择，调整文本框数字的大小

jquery 如何实现文本框只输入数字，并且可以手写，也可以上下选择，调整文本框数字的大小

Answer 1

<div class="myInputNumber">
    <input type="text" min="0" max="10" step="1">
    <div class="spin-wrap">
    <div class="spin" data-node="up"></div>
    <div class="spin" data-node="down"></div>
    </div>
</div>

.myInputNumber{
    width:200px;
}
.myInputNumber input{
    width:180px;
    border-right:none;
}
.spin-wrap{
    float:right;
}
.spin{
    background-color:white;
    width:20px;
    height:10px;
}
.spin:hover{
    background-color:gray;
    cursor:pointer;
}

var myInputNumber = $('.myInputNumber');
var input = myInputNumber.find('input');
var spinUp = myInputNumber.find('[data-node=up]');
var spinDown = myInputNumber.find('[data-node=down]');
spinUp.click(function(){
    var curVal = Number(input.val()) || 0;
    var step = Number(input.attr('step')) || 1;
    input.val( curVal + step );
});
spinDown.click(function(){
    var curVal = Number(input.val()) || 0;
    var step = Number(input.attr('step')) || 1;
    input.val( curVal - step );
});
var keyCode = {
};
input.keydown(function(e){
    var kc = e.keyCode;
    console.log(e.keyCode);
    if(
          (kc >= 48 && kc <= 57) // [0-9]
        || kc == 189  // - 负号
        || kc == 190  // . 小数点
        || kc == 8 // backspace
        || kc == 37 // 左箭头
        || kc == 39 // 右键头
        ){
        return true;
    }
    return false;
});

逻辑已经基本实现，你只需要贴上你的皮肤即可。

Answer 2

<input type="number" /> 这不就是你要的效果

如果不支持ie的话，看看这个
http://blog.163.com/yhwwen@126/blog/static/170468853201381701414931/

Answer 3

<input type="number" />

追问

input type=“number”在IE8中不显示上下箭头。