解决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和负数问题 去掉上下箭头的实现方法
码云笔记 » 解决type为number时能输入e和负数问题 去掉上下箭头的实现方法