关于去掉箭头 且不能输入e和标点符号
由图所示:数字框空间本来就很小,然后还被箭头占用;
由图所示:数字框虽然css样式设置居中对齐,但是由于被箭头占用,所以不能居中对齐显示,不美观;
由图所示:数字框空间本来就很小,由于箭头占用,导致两位数不能完全显示.
结构代码如下:
<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT">
更改input数字框的样式,需要注意:有可能会涉及css样式的权重问题;
我是在需要去除箭头的html结构上添加类名NUM-INPUT
<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT">
input.NUM-INPUT::-webkit-outer-spin-button,
input.NUM-INPUT::-webkit-inner-spin-button {
-webkit-appearance: none;
}
请看下图改善后结果:
现象描述如下图:
为什么其他字母不能输入,但是e可以输入数字框呢?
原因是e在数学上代表一常量2.71828,所以它也还是一个数字,当然就可以输入进去;
除此之外,还有+-*/.
这些特殊的运算符号也能输入数字框.
那如果我只想让用户输入纯数字,怎么办?
<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
这个方法只适用于输入正整数
<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" oninput="this.value=this.value.replace(/[^0-9.]+/g,'');">
如果需要输入小数可以把"."从正则表达式保留
其实方法还有很多,只要能够解决问题就好~