移除input在type="number"时的上下箭头和禁用鼠标滚轮事件

网页在有些情况下，会需要input的输入的为单纯数字的文本框，此时type=number，但使用type=number时，输入框后面会有一个上下箭头，那么如何去掉上下箭头呢？

1、chrome浏览器移除

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
}

使用none替代textfield，也可以实现去除箭头的效果

2、firefox浏览器下移除

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

在firefox浏览器下使用none替代textfield没有效果。

3、用type="tel"代替

　　input[type="tel"]的value值亦是number，且其没有type="number"时的上下箭头，故我们可以用[type="tel"]代替[type="number"]，达到一样的效果，并通过设置maxlength = "m"限定value值得长度。如果有其他的要求，可以通过正则来判断。当然这种方式不能解决本质问题

4、禁用鼠标滚轮事件

不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），所以在这个过程中需要添加事件监听，代码如下：兼容firefox采用addEventListener监听:

 if(document.addEventListener){ //兼容firefox
    document.addEventListener('DOMMouseScroll',MouseWheel,false); 
  }//W3C 
 window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome 

if(document.addEventListener){ //兼容firefox
    document.addEventListener('DOMMouseScroll',MouseWheel,false); 
  }//W3C 
 window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome

禁止默认行为

function MouseWheel(event) { event = event || window.event; event.preventDefault(); }

5、鼠标滚轮事件

判断滚轮的上下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；detail只取±3，wheelDelta只取±120。

<input type="text" id="detail"/>

<input type="text" id="wheelDelta"/>

<script type="text/javascript"> 
var scrollFunc=function(e){ 
    e = e || window.event; 
    var t1 = document.getElementById("wheelDelta"); 
    var t2 = document.getElementById("detail"); 
    if (e.wheelDelta) {//IE/Opera/Chrome 
        t1.value = e.wheelDelta; 
    } else if (e.detail) {//Firefox 
        t2.value = e.detail; 
    } 
} 
/*注册事件*/ 
if(document.addEventListener){ 
    document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
</script>