自定义input type=number 的上下箭头

记录一下
客户要求：设置input的type=number 但是不能直接输入，只能用上下箭头来控制value。
但是应用场景是手持端，无法让上下箭头显示出来。所以只能重写！！！
思路：
1、先将input框点击不出现键盘（不可直接输入）。
给input加事件

οnfοcus="this.blur();"

2、去掉原css的上下箭头。

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    
    
  height: auto;
  -webkit-appearance: none;
}

3、自定义上下箭头及方法。
自定义按钮

<div class="input-group-addon input_last" id="number_of_pallets_btn" style="height: 100%;padding:0px;">
	<input type="button" value="▲" id="up" οnclick="addOne('number_of_pallets_check')" />
	<input type="button" value="▼" id="down" οnclick="removeOne('number_of_pallets_check')" />
</div>

input框

<input type="number" id="number_of_pallets_check"  min="0" οnfοcus="this.blur();">

js

/**
 * 判空方法 
 * @param value
 * @returns
 */
function notEmpty(value){
    
    
	if(value != "" && value != null && value != " " && value != undefined && value != "null"){
    
    
		return true;
	}else {
    
    
		return false;
	}
}

/**
 * numberAdd
 * @param id
 * @returns
 */
function addOne(id){
    
    
	var value = notEmpty($("#"+id).val()) ? parseInt($("#"+id).val()) : 0 ;
	$("#"+id).val(value + 1);
}

/**
 * numberMinus
 * @param id
 * @returns
 */
function removeOne(id){
    
    
	var value = notEmpty($("#"+id).val()) ? parseInt($("#"+id).val()) : 0 ;
	if(value != 0){
    
    
		$("#"+id).val(value - 1);
	} else {
    
    
		$("#"+id).val(0);
	}
}

看下效果图吧

这个时候点击上下键就可对input的value进行改变了，并且不可直接输入内容。
到这里就结束了。完成了客户的要求！！！