Vue 2动态数字输入的实时验证与字符限制问题

1. 解决number输入框maxlength无效+光标偏移问题 #

原生number类型输入框不支持maxlength属性，直接用oninput修改值还会导致光标错位（尤其是设置了text-align:right时），可以通过监听input事件+手动维护光标位置来解决：

给每个动态渲染的输入框绑定事件，实时处理字符长度限制，同时保留光标位置：

<template>
  <div v-for="(item, idx) in inputArray" :key="idx">
    <input
      type="number"
      v-model.number="item.value"
      :ref="`input-${idx}`"
      @input="handleInput(idx, $event)"
      style="text-align: right;"
    >
    <span v-if="item.error" class="error-text">输入值与原值差值超过阈值！</span>
  </div>
  <button :disabled="hasAnyError" @click="saveAndContinue">save & continue</button>
</template>

<script>
export default {
  data() {
    return {
      inputArray: Array(30).fill({ value: 0, oldValue: 0, error: false }),
      maxInputLength: 5, // 自定义最大字符长度
      changeThreshold: 100 // 允许的最大差值
    }
  },
  computed: {
    hasAnyError() {
      return this.inputArray.some(item => item.error)
    }
  },
  mounted() {
    // 初始化时把旧值设为初始值
    this.inputArray.forEach(item => item.oldValue = item.value)
  },
  methods: {
    handleInput(idx, e) {
      const input = this.$refs[`input-${idx}`][0]
      const currentVal = e.target.value
      const cursorPosition = input.selectionStart

      // 限制输入字符长度
      if (currentVal.length > this.maxInputLength) {
        e.target.value = currentVal.slice(0, this.maxInputLength)
        // 恢复光标位置，避免截断后光标跳到开头
        input.setSelectionRange(cursorPosition - 1, cursorPosition - 1)
      }

      // 检查数值差值是否超阈值
      const numVal = Number(e.target.value)
      const diff = Math.abs(numVal - this.inputArray[idx].oldValue)
      this.inputArray[idx].error = diff > this.changeThreshold
    },
    // 点击保存时更新旧值并重置错误状态
    saveAndContinue() {
      this.inputArray.forEach(item => {
        item.oldValue = item.value
        item.error = false
      })
      // 这里写你的保存逻辑
    }
  }
}
</script>

<style scoped>
.error-text {
  color: red;
  margin-left: 8px;
}
</style>

2. 为什么不用watch监听数组？ #

监听整个inputArray会触发批量更新，没法做到单个输入框的实时响应，而且性能不如直接绑定输入事件——30个输入框的量级，单个事件处理完全无压力。

3. 核心细节 #

• 光标位置修复：每次截断字符后手动调整光标位置，彻底解决text-align:right时输入小数点光标左移的问题。
• 独立状态管理：每个输入项单独维护oldValue和error，避免状态混乱，通过计算属性统一控制按钮禁用状态。
• number类型兼容：用v-model.number自动转换输入值为数字，空输入会转为0，避免NaN问题。

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