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

原创最新推荐文章于 2026-09-29 11:49:47 发布 1.6k 阅读 AI写同款

收录于

elementUi

核动力驴_

码龄5年墨衍会员 · AI 创作全网分发

54粉丝24篇原创

关注

饿了么input输入框设置type=‘number‘时，去掉后面的上下按钮 BUT在现在项目中，使用的是vue+element，通常写当前页面的样式时使用scoped，但是这样会发现上面的代码失效，此时需要使用/deep/当inputtype=‘number’时，去掉后面的上下按钮。在style里面添加此段代码即可。... 阅读详情

AI摘要

文章讲述了在使用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;
}

标签

#vue.js #javascript #elementui