el-input设置属性type=number时相关问题

最新推荐文章于 2025-05-07 14:39:07 发布

原创最新推荐文章于 2025-05-07 14:39:07 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

elementUi 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在使用ElementUI的el-input组件设置为number类型时遇到的各种问题，如中文输入光标移动、允许特殊字符、禁止上下键改变值和鼠标滚动，提供了相应的CSS和JavaScript解决方案。

1.el-input设置type=number时，输入中文光标上移的问题

解决方法：

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

2.el-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(() => {
  // 处理点击键盘上下键不可以改变input中的值
  document.onkeydown = function () {
    if (window.event.keyCode === 38 || window.event.keyCode === 40) {
      window.event.returnValue = false;
    }
  }
})

4.鼠标点击箭头增加或者减小数值，鼠标滚动也会改变问题

解决方法：

 // 隐藏el-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;
}