el-input type=number的时候相关问题

1. el-input设置type为number时，切换为中文输入法输入会让光标上移的问题解决

这是el-input的一个bug，就是当他设置类型时number的时候，你用中文输入法输入，点空格确定，他的光标会移动到上面去

解决前（效果图）：

解决后（效果图）：

解决方法：

<style>
/**
 * 解决el-input设置类型为number时，中文输入法光标上移问题
 **/
.el-input__inner{
  line-height: 1px !important;
}
</style>

2. el-element 中 input设置了type=“number“还能输入e和负数

解决方法：

οnkeypress=“return (/[\d]/.test(String.fromCharCode(event. keyCode )));”

<el-input v-model="queryForm.remainingCountBeg"
    placeholder="剩余次数(起)" clearable type="number" maxlength="9" 
    onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));">
</el-input>

3. 禁止键盘上下键事件 ( 其实按键盘上下键还是可以让其变成负数 )

解决方法：

onMounted(() => {
      // el-input type=number时,如果点击键盘上下可以改变input中的值,这个方法是禁止改变
      document.onkeydown = function () {
        if (window.event.keyCode === 38 || window.event.keyCode === 40) {
          window.event.returnValue = false;
        }
      }
    })

4. 鼠标点击箭头增加减小数值，它的鼠标滚动也会改变

解决办法: 隐藏箭头

// 全局css 加上以下代码，可以隐藏上下箭头
 
// 取消input的上下箭头
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance: textfield;
}

5. el-input类型为number时禁止输入e和.

<el-form-item label="数字" prop="first_channel_code">
  <el-input type="number" v-model.number="ruleForm.first_channel_code" @keydown.native="channelInputLimit"></el-input>
</el-form-item>

// bug fix：指定输入类型为number时仍然可以输入字母'e'和小数点'.'（因为也属于数字类型的范围），这里做一下输入限制
channelInputLimit (e) {
  let key = e.key
  // 不允许输入'e'和'.'
  if (key === 'e' || key === '.') {
    e.returnValue = false
    return false
  }
  return true
}

6. el-input 使用正则解决限制12位整数和6位小数

<el-input
    v-model.trim="manualInputValue"
    type="number"
    @input="changeManualInput"
></el-input

...

 methods: {
     changeManualInput(val) {
      this.manualInputValue = val.replace(/^(\d{12})\d+|((\.\d{6})\d+)$/g, "$1$3");
    },
 }