input[type=number]下禁止输入e、+、-

avoidaily

于 2024-08-17 14:26:00 发布

阅读量96

点赞数

文章标签：前端 css html

原文链接：https://www.jianshu.com/p/cb418cf4c71e

版权

输入框input[type=number]能输入的e = 2.71828…

解决:
在inpu原生事件中把非数字的按键过滤掉，具体操作如下：

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

// 如:
 <input v-model="goPage"
   onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 
   :max="9999999" type="number" placeholder="请输入"></input>

输入框有自带的上下箭头，即input[type=number]实际上为步距输入框也就是计数器…会有自带的样式，顺带下面附上解决方案…

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
// vue的scope下
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type="number"]{
  -moz-appearance: textfield;
}