js解决input number类型上下滚动，禁用滚轮事件

今天遇到一个需求：通过探方的顶面高程，当用户输入器物高程时候，根据探方计算器物的深度

一开始觉得很简单，想着用一个onkeyup事件，+input type=number控制职能输入数字，算好了以后，当我用滚轮上下滚动鼠标时，发现onkeyup事件捕捉不到滚轮，所以input数字变了，但是深度值确不对。所以我想到禁用滚轮事件来解决这个问题

1.

去掉input在type="number"时右边的上下箭头

css:

<style>
	input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
	}	
	input[type="number"]{
        -moz-appearance:textfield;
	}
</style>

2.禁用input数字滚轮事件

 <input type="number"   id="gc" name="XDLM高程"  value="0" style="width:50%;display:inline-block;" class="form-control" required onKeyUp="gcInsert()" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>

由上图，在onKeyUp时候调用计算函数 gcInsert()

鼠标滚轮事件调用函数scrollFunc()

function scrollFunc(evt) {  
  evt = evt || window.event;  
    if(evt.preventDefault) {  
    // Firefox  
      evt.preventDefault();  
      evt.stopPropagation();  
    } else {  
      // IE  
      evt.cancelBubble=true;  
      evt.returnValue = false;  
  }  
  return false;  
}  

深度=顶面高程-器物高程

function gcInsert(){
		//判断当前探方有没有值
	if($('#TFNum').val()==''||$('#TFNum').val()==null||$('#TFNum').val()==undefined||$('#TFNum').val()=='NULL'){
		$('#shendu').val(0);
		$('#GC').val(0);
		$('#sdnotice').html('请选择探方编号');
	}else{
		if($('#GC').val()==''){
			$('#sdnotice').html('高程为空');
			layer.alert('高程为空',function(index){
				$('#GC').focus();
				layer.close(index);
				return false;
			});
		}else{
			//获取探方数据
			var rvtf = PostDataGET('GetDataList', {
					XDLMTableName: FJ_TFGL,
					XDLMTable_Where: "where 项目编号='" + getCookieName('xmbh') + "' and 探方编号='"+$('#TFNum').val()+"'"
			});
			if(rvtf.success){
				console.log(rvtf);
//				topGC
				if(rvtf.rows.length>0){
					//顶面高程
					if(rvtf.rows[0].topGC!=''){
						var topgc=isNaN(rvtf.rows[0].topGC)?0:rvtf.rows[0].topGC;
						console.log(topgc);
						var gc=isNaN($('#GC').val())?0:$('#GC').val();
//						if((topgc-gc)>=0){
							$('#shendu').val((topgc-gc).toFixed(2));
							$('#sdnotice').html('左边输入框为结果');
//						}else{
//							$('#shendu').val(0);
//							$('#sdnotice').html('高程输入过限');
//						}
					}else{
						$('#shendu').val(0);
						$('#sdnotice').html('探方无顶面高程数据');
					}
				}else{
					$('#sdnotice').html('探方无顶面高程数据');
					layer.msg('探方无顶面高程数据',{icon:0,time:1000});
					$('#shendu').val(0);
				}
			}

		}
			
	}
}

自动计算

input数字去掉右边之前

输入一个高程

自动计算后

成功！！！