Vue.js + Quasar实现输入框从末尾填充数字的方案

根据你的需求，这里提供一个精准的实现方案，核心是通过拦截键盘事件和粘贴事件，严格控制输入框的内容变化，完全匹配你给出的示例流程：

完整代码 #

<template>
  <div> 
    <q-input 
      class="input" 
      v-model="number" 
      outlined 
      label="number" 
      mask="##########" 
      minLength="10" 
      maxlength="10"
      @keydown="onKeyDown"
      @paste="onPaste"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 初始值为10个0
    const number = ref("0000000000");

    // 处理键盘输入事件
    const onKeyDown = (e) => {
      // 数字键：左移现有内容，末尾追加新数字
      if (e.key >= '0' && e.key <= '9') {
        e.preventDefault();
        number.value = number.value.slice(1) + e.key;
      } 
      // 退格键：删除最后一位，开头补0保持长度
      else if (e.key === 'Backspace') {
        e.preventDefault();
        number.value = '0' + number.value.slice(0, -1);
      }
      // 其他按键（如tab、方向键）保留默认行为
    };

    // 处理粘贴事件，兼容批量数字输入
    const onPaste = (e) => {
      e.preventDefault();
      // 过滤粘贴内容中的非数字字符
      const pasteDigits = e.clipboardData.getData('text').replace(/\D/g, '');
      if (pasteDigits) {
        // 按顺序处理每个粘贴的数字，模拟逐次输入
        pasteDigits.split('').forEach(digit => {
          number.value = number.value.slice(1) + digit;
        });
      }
    };

    return {
      number,
      onKeyDown,
      onPaste
    };
  }
}
</script>

关键逻辑说明 #

1. 数字输入处理：拦截数字键的默认输入行为，将现有字符串左移一位（去掉第一个字符），然后在末尾追加新输入的数字，确保始终保持10位长度，完全匹配你给出的输入示例。
2. 删除操作处理：拦截退格键的默认行为，去掉字符串最后一位，然后在开头补0，维持10位长度，符合删除后补0的需求。
3. 粘贴兼容：处理粘贴事件，过滤非数字内容后，逐位模拟手动输入，确保批量粘贴也遵循同样的填充规则。
4. 格式约束：保留mask、minLength和maxlength属性，从UI层面确保输入框始终显示10位数字，避免异常格式。

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