解决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和负数问题

原来在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输入位数方法,自己做一下笔记记录,也希望对大家有用。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 解决type为number时能输入e和负数问题 去掉上下箭头的实现方法

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发