记录一下
客户要求:设置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进行改变了,并且不可直接输入内容。
到这里就结束了。完成了客户的要求!!!