el-input 数字输入框禁用键盘上下箭头

前言

在前端开发中，我们常常会使用 el-input 组件，并将 type 设置为 number 来实现数字输入功能，同时，键盘的上下箭头按键也会改变输入框内的数值。然而，这在某些业务场景下并不符合需求，甚至会给用户带来误操作的风险。为避免因误操作引发业务风险，就需要禁止使用键盘上下箭头按键。本文将分享几个实用的方法，优化用户输入体验。

方法一：使用按键修饰符

直接在模板中为上下箭头按键绑定事件并阻止默认行为：@keydown.native.up.prevent 和 @keydown.native.down.prevent 用于禁用键盘上下箭头功能。@keydown 是监听键盘按下事件，native 表示使用原生 DOM 事件，up 和 down 分别对应上下箭头，prevent 阻止默认行为，从而避免箭头改变输入框数值。

<template>
  <div>
    <el-input v-model="inputValue" type="number" @keydown.native.up.prevent @keydown.native.down.prevent></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

方法二：通过事件函数判断 keyCode

在 JavaScript 中，键盘上箭头的 keyCode 为 38，下箭头的 keyCode 为 40 。handleKeyDown 方法通过判断 event.keyCode 是否在数组 [38, 40] 中，若在则调用 event.preventDefault() 阻止默认事件，从而避免上下箭头改变输入框数值。

<template>
  <div>
    <el-input v-model="inputValue" type="number" @keydown.native="handleKeyDown"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    handleKeyDown(event) {
      if ([38, 40].includes(event.keyCode)) {
        event.preventDefault();
      }
    },
  },
};
</script>

方法三：通过事件函数判断 event.key

在 JavaScript 中，可利用事件对象的 key 属性来判断按下的键。handleKeyDown 方法中，通过判断按下的键是否为上箭头（ArrowUp）或下箭头（ArrowDown） ，若是则调用event.preventDefault() 阻止浏览器对该按键的默认行为，这样就避免了上下箭头改变输入框内的数值。

<template>
  <div>
    <el-input v-model="inputValue" type="number" @keydown.native="handleKeyDown"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
        event.preventDefault();
      }
    },
  },
};
</script>

两个方法合并兼容新老浏览器

methods: {
  handleKeyDown(event) {
    const isArrowUpOrDownByKey = event.key === "ArrowUp" || event.key === "ArrowDown";
    const isArrowUpOrDownByKeyCode = [38, 40].includes(event.keyCode);
    if (isArrowUpOrDownByKey || isArrowUpOrDownByKeyCode) {
      event.preventDefault();
    }
  },
},

总结

三种方法优劣：

• 方法一：@keydown.native.up.prevent 和 @keydown.native.down.prevent

  优势： 代码直观简洁，通过在 el-input 标签上直接绑定指令，即可快速实现禁用上下箭头功能，一目了然，方便新手理解与上手；语义清晰，从标签属性就能看出其作用是阻止上下箭头默认行为，代码可读性高。

  劣势： 兼容性稍弱，在一些老旧浏览器中，可能无法正确识别 @keydown.native.up 和 @keydown.native.down 这种事件绑定方式，导致功能失效。

• 方法二：通过 keyCode 判断

  优势： 兼容性好，keyCode 属性在众多浏览器中都能稳定获取，即便在老旧浏览器中也能有效识别上下箭头按键；可扩展性强，在需要对多个按键进行统一处理的场景下，通过修改 keyCode 数组内容，就能轻松实现更多按键的拦截与处理。

  劣势： 代码直观性较差，keyCode 数值与具体按键的对应关系需要开发者记忆，不如第一种方法直接明了；随着 JavaScript 标准演进，keyCode 已逐渐被 event.key 替代，使用 keyCode 不符合现代开发趋势，可能会在后续项目升级时带来适配问题。

• 方法三：通过 event.key 判断

  优势： 采用符合现代 JavaScript 标准的 event.key 属性判断，相比 keyCode 更具语义化，ArrowUp 和ArrowDown 直接对应上下箭头，代码易读性强；兼容性在主流现代浏览器中表现良好，能满足大多数项目需求。​

  劣势： 在部分极老旧浏览器中可能存在兼容性问题；相较于 @keydown.native.up.prevent 和 @keydown.native.down.prevent，需要在 methods 中编写方法，代码结构稍显复杂，不够简洁直观；如果需要对多个按键进行处理，代码的扩展性不如基于 keyCode 数组判断的方式灵活。​