Vue中实现输入数字掩码（仅显最后四位）并保留原始值的方法

需求与问题现状 #

• 需求：输入数字时，输入框仅显示最后四位，其余内容用*替代；同时需将未掩码的原始数值完整存储在oValue变量中。
• 问题：当前代码实现了掩码显示，但oValue被错误赋值为掩码后的值，无法保留原始输入。
• 预期效果：例如输入123456789时，oValue = 123456789，输入框显示*****6789

当前错误代码 #

模板代码 #

<v-text-field v-model="numInput" @input="maskNum" />

方法代码 #

maskNum(numToMask) { 
  this.oValue = numToMask; 
  this.numInput = numToMask.replace(/\d(?=\d{4})/g, '*'); 
}

问题根源 #

v-model是双向绑定，当修改numInput为掩码值后，输入框的实际值会同步更新为掩码内容；下一次触发@input时，传入的numToMask会变成掩码后的字符串，导致oValue被覆盖为掩码值，丢失原始输入。

修复方案 #

核心思路 #

分离显示值与原始存储值：用单向绑定控制输入框显示内容，直接捕获用户的原始输入进行存储，再单独处理掩码显示逻辑。

修复后代码 #

模板代码

<v-text-field :value="numInput" @input="handleInput" />

方法代码

handleInput(rawValue) {
  // 直接存储用户输入的原始值
  this.oValue = rawValue;
  // 根据原始值生成掩码显示内容
  if (rawValue.length > 4) {
    // 长度超过4位时，前面用*填充，保留最后四位
    this.numInput = '*'.repeat(rawValue.length - 4) + rawValue.slice(-4);
  } else {
    // 长度不足4位时，直接显示原始值
    this.numInput = rawValue;
  }
}

可选正则实现（针对纯数字输入） #

如果确保用户输入为纯数字，可改用正则替换实现掩码：

handleInput(rawValue) {
  this.oValue = rawValue;
  // 替换所有前面的数字为*，仅保留最后四位数字
  this.numInput = rawValue.replace(/\d(?=\d{4})/g, '*');
}

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