今天遇到一个需求:通过探方的顶面高程,当用户输入器物高程时候,根据探方计算器物的深度
一开始觉得很简单,想着用一个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数字去掉右边之前
输入一个高程
自动计算后
成功!!!