关于input type='number'去掉箭头 且不能输入e和标点符号

关于去掉箭头 且不能输入e和标点符号

• 1.input数字框去掉箭头

由图所示：数字框空间本来就很小,然后还被箭头占用;

由图所示：数字框虽然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;
}

请看下图改善后结果:

• 2.禁止输入字母e和标点符号

现象描述如下图:

为什么其他字母不能输入,但是e可以输入数字框呢?
原因是e在数学上代表一常量2.71828，所以它也还是一个数字,当然就可以输入进去;
除此之外,还有+-*/.这些特殊的运算符号也能输入数字框.
那如果我只想让用户输入纯数字,怎么办?

• 解决办法1:

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">

这个方法只适用于输入正整数

• 解决办法2:

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" oninput="this.value=this.value.replace(/[^0-9.]+/g,'');">

如果需要输入小数可以把"."从正则表达式保留

其实方法还有很多,只要能够解决问题就好~