Angular输入框首8位替换为X后，未掩码值显示异常求助

你的问题核心在于：输入框绑定显示的是掩码后的maskedInput，所以event.target.value拿到的是已经替换为X的内容，而非用户实际输入的原始字符，导致unmaskedInput被错误赋值成掩码版本。

以下是修正后的实现：

HTML 代码 #

<input type="text" [value]="maskedInput" (input)="onInput($event)" maxlength="12">
<p>Masked: {{ maskedInput }}</p>
<p>Unmasked: {{ unmaskedInput }}</p>

TypeScript 代码 #

maskedInput: string = '';
unmaskedInput: string = '';

onInput(event: InputEvent) {
  const inputElement = event.target as HTMLInputElement;
  
  // 处理字符新增
  if (event.data) {
    if (this.unmaskedInput.length < 12) {
      this.unmaskedInput += event.data;
    }
  } 
  // 处理字符删除（退格/删除键）
  else {
    this.unmaskedInput = this.unmaskedInput.slice(0, -1);
  }

  // 生成掩码内容：前8位替换为X，保留后4位
  const maskedPrefix = this.unmaskedInput.slice(0, 8).replace(/./g, 'X');
  const visibleSuffix = this.unmaskedInput.slice(8);
  this.maskedInput = maskedPrefix + visibleSuffix;

  // 同步光标位置，避免输入时光标跳回开头
  setTimeout(() => {
    inputElement.setSelectionRange(this.maskedInput.length, this.maskedInput.length);
  }, 0);
}

关键调整说明 #

1. 直接维护unmaskedInput作为真实输入值：通过event.data判断用户是新增还是删除字符，手动更新原始值，不再依赖输入框的掩码内容。
2. 掩码生成逻辑基于真实值：从unmaskedInput截取前8位替换为X，拼接后4位得到显示用的maskedInput。
3. 光标位置修复：添加了光标同步逻辑，解决输入时光标自动跳回开头的体验问题。

如果只需要对数字字符替换为X，把正则/./g改回/\d/g即可。

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