Vue.js中input绑定keydown事件不触发 如何实现5位数字输入限制

Vue中用@（即v-on）绑定原生DOM事件时，不需要带事件名的on前缀。你写的@onkeydown实际是在监听DOM上不存在的自定义事件onkeydown，绑定的方法永远不会被触发。
额外注意：type="number"类型的输入框对非数字输入有内置的取值过滤，仅监听keydown事件无法覆盖右键粘贴、中文输入法联想输入等场景，校验逻辑会存在漏洞。

方案1：直接绑定事件处理（响应更快） #

模板部分修正事件名，同时补充input事件覆盖所有输入场景：

<input 
  type="number" 
  min="0" 
  @keydown="limitText" 
  @input="limitText"
>

对应方法逻辑，加入字符过滤和长度截断：

limitText(e: KeyboardEvent | InputEvent) {
  const input = e.target as HTMLInputElement
  // 过滤所有非数字字符
  let formatVal = input.value.replace(/\D/g, '')
  // 超过5位时直接截断前5位
  if (formatVal.length > 5) {
    formatVal = formatVal.slice(0, 5)
  }
  // 把处理后的值写回输入框
  input.value = formatVal
}

方案2：配合v-model响应式处理（更贴合Vue开发习惯） #

如果输入框值需要和业务状态绑定，直接用响应式监听处理更方便：

<template>
  <input type="number" min="0" v-model="numVal">
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const numVal = ref('')
watch(numVal, (newVal) => {
  let formatVal = String(newVal).replace(/\D/g, '')
  if (formatVal.length > 5) formatVal = formatVal.slice(0, 5)
  numVal.value = formatVal
})
</script>

内容的提问来源于stack exchange，提问作者Jesus