解决type为number时能输入e和负数问题 去掉上下箭头的实现方法

最近在做一个项目的时候遇到这样一个需求，要求input框只能输入数字，而且用户输入的数字必须是正数，所以这里我采用type="number"方式来完成，这样我们就不需要校验输入内容的合法性了，但是呢我疏忽了一点，在 html5 中，input type="number"时，右边会有一个上下小箭头，一直点击向下小箭头时，会出现负数情况，这明显不满足我们的需求，所以我通过 css 相关属性去掉上下小箭头，并完成浏览器的兼容。

公共 css 代码如下：

/*谷歌*/
input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
/*火狐*/
input[type="number"] {
       -moz-appearance: textfield;
}

当然如果你想去掉某个专用的number的小箭头样式，你也可以这样写：

/*在谷歌下移除 input[number]的上下箭头*/
.inputNumber input[type='number']::-webkit-outer-spin-button,
   .inputNumber input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}
   /*在 firefox 下移除 input[number]的上下箭头*/
.inputNumber input[type="number"] {
	-moz-appearance: textfield;
}

此时效果：

哈哈，就是这么简单，本以为可以挖煤收工了，却收到测试发消息说，手动输入可以输入负数，输入数字以外的字母 e 也可以，卧槽，百密一疏啊！

原来在input="number"的时候还是能输入'-'和'e'，是因为在正常情况下e不是数字所以不能被输入，原因是e在数学上代表 2.71828，所以它也还是一个数字，好吧，一行 js 搞定它。

<input type="number" class="form-control" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入" >

关键代码：

onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"

另外，如果我们想限制位数时除了 maxlength 之外还可以这样写：

<input type="number" class="form-control" oninput="if(value.length>14)value=value.slice(0,14)" placeholder="请输入">

关键代码：

oninput="if(value.length>14)value=value.slice(0,14)"

总结

以上就是我在项目中遇到的 input=’number 相关问题，并解决 input=’number’能输入 e 和负数的问题，通过 css 去掉了上下箭头方法，并附加解决了一下限制位数时除了 maxlength 之外其他的限制 input 输入位数方法，自己做一下笔记记录，也希望对大家有用。

以上关于解决type为number时能输入e和负数问题 去掉上下箭头的实现方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。