el-input设置type为number时,会出现一大堆问题,我这里遇到几个常见的问题记录一下
<el-input
placeholder="请输入搜索关键字"
v-model.trim="search"
type="number"
@input="onLimitInput($event, 'search')"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
@wheel.native.prevent="stopScroll($event)"
@keydown.native="onDisableKeys"
></el-input>
可以输入e
由于 e 在数学上代表 2.71828,因此它也是一个数字,所以允许输入
// 限制英文输入e
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
注:
这里处理不了中文输入法e,获取到key是Process,在@input事件里正则过滤?? 暂时没想到好办法??
光标上移
// 解决输入中文后光标上移的问题
.el-input__inner{
line-height: 1px !important;
}
上下箭头
1、css隐藏上下箭头
css样式隐藏箭头,及中文输入光标上移,
注:
这里仅样式隐藏上下箭头,实际鼠标滚轮
和键盘上下键
还可以操作
// 去掉number输入框的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
2、鼠标上下滚轮禁用
@wheel.native.prevent="stopScroll($event)"
stopScroll(e) {
e = e || window.event;
if (e.preventDefault) {
// Firefox
e.preventDefault()
e.stopPropagation()
} else {
// IE
e.cancelBubble = true
e.returnValue = false
}
return false
},
3、键盘上下键禁用
这里两种写法,操作的都是键盘keydown事件,用哪一个都可以
1、在mounted钩子函数里(vue2版本)
mounted () {
document.onkeydown = function () {
console.log(window.event.keyCode, '键码');
// 键盘上(38)下(40)键
const disableKeyCodes = [38, 40]
window.event.returnValue = !disableKeyCodes.includes(window.event.keyCode)
}
}
2、在el-input标签上绑定keydown事件 需加.native穿透使用原生事件
@keydown.native="onDisableKeys"
onDisableKeys (e) {
// 禁用大小写e,+-,上下箭头
const disableKeyCodes = ['e', 'E', '+', '-', 'ArrowUp', 'ArrowDown']
const isDisableStatus = !disableKeyCodes.includes(e.key)
e.returnValue = isDisableStatus
return isDisableStatus
},