自定义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();">

/*** 判空方法 * @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进行改变了，并且不可直接输入内容。
到这里就结束了。完成了客户的要求！！！

自定义input type=number 的上下箭头相关推荐

【Antdv】input type=number去掉上下箭头、提示文字、鼠标滚轮
数字输入框在项目中十分常用,但是有一些属性影响使用体验.解决方案如下: 1.整数文字提示解决方法,将title="" title="" 2.鼠标滚轮会修改数值 ...
如何解决 input type=“number“出现上下箭头
jsp里面的样式代码: 如果input只可以输入数字那就改成input type="number" 然后会出现上下箭头用下面这个样式就会去掉 input::-webkit-ou ...
设置input[type=number]不显示箭头
input[type=number] {&::-webkit-outer-spin-button,&::-webkit-inner-spin-button {-webkit-appea ...
html input 上下箭头,CSS input type=number出现上下箭头时解决方案
php的http_build_query使用 http_build_query生成 url-encoded 之后的请求字符串 1.使用键值对,关联数组: <?php $data = array( ...
解决input 中 type=“number“右侧上下箭头以及取消默认滚轮事件
1.解决右侧上下箭头 <style>input[type='number'] {-moz-appearance:textfield;}input[type=number]::-webkit ...
去掉input type=“number“ 输入框内右侧上下箭头
需求: 原生input标签当type为number时,鼠标聚焦input框会在右侧会出现上下箭头调整数字的按钮,此时ui设计图要求去掉这个上下箭头解决方案在样式内写上如下代码: //谷歌 inpu ...
element-ui el-input “type=number“的上下箭头去掉
经常在使用elementUI的input组件type=number的时候会出现末尾有上下箭头如何解决呢? 改变css ::v-deep input::-webkit-outer-spin-butto ...
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,inpu ...
react input[type='number']
最近在写业务的时候遇到一个坑,当用户在 input[type='number'] 中输入 "01" 时,我将值设置为 1 ,但它不起作用,它仍显示 "01". ...

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

自定义input type=number 的上下箭头相关推荐

最新文章

热门文章