el-input设置了type=“number“还能输入e和中文输入光标上移的问题记录

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
},