输入框动态掩码：隐藏前8位显示后4位方法

本文深入解析了在 Angular 中实现输入框动态掩码的关键技巧——如何让用户输入12位数字时，界面实时显示为“XXXXXXXX1234”（前8位隐藏为X、后4位明文可见），同时确保原始完整值在组件内准确保留、不被掩码逻辑污染；文章直击单向绑定导致的双向同步失效痛点，提出以 ngModel 为核心的双向绑定方案，清晰分离可信数据源（unmaskedInput）与纯展示派生值（maskedInput），并给出含输入校验、非法字符过滤和模块配置要点的完整可运行代码，兼顾安全性、用户体验与 Angular 最佳实践，适用于银行卡号、身份证号等敏感字段的前端掩码场景。

本文详解如何在 Angular 中实现输入内容的实时掩码处理，即用户输入12位数字时自动隐藏前8位为'X'、保留后4位可见，并正确分离原始值与掩码值，避免双向绑定失效问题。

在 Angular 应用中，对敏感字段（如银行卡号、身份证号）进行前端掩码展示是常见需求。典型场景之一是：用户输入 12 位数字，界面仅显示 XXXXXXXX1234（前 8 位用 X 遮盖，后 4 位明文显示），但组件内部仍需完整保留原始输入值用于提交或校验。

然而，若直接使用 [value] + (input) 的单向绑定组合（如下所示），会导致“原始值被覆盖”问题：

<input type="text" [value]="maskedInput" (input)="onInput($event)" maxlength="12">

原因在于：[value] 是单向数据绑定，它只将 maskedInput 推送至 DOM，但不会将用户输入同步回组件属性；而 (input) 事件中读取的 event.target.value 实际是已被 maskedInput 覆盖后的显示值（即 XXXXXXXX1234），而非用户真实键入的原始字符串。这正是提问者观察到 unmaskedInput 也显示掩码内容的根本原因。

✅ 正确解法：使用 ngModel 实现真正的双向绑定

ngModel 在模板中建立 unmaskedInput 与输入框的双向同步，确保：

• 用户输入实时更新 unmaskedInput
• onInput() 仅负责计算并更新 maskedInput（用于显示），不干扰原始值

✅ 推荐实现（含完整代码）

1. 模板（HTML）

<input 
  type="text" 
  [(ngModel)]="unmaskedInput" 
  (input)="onInput()" 
  maxlength="12"
  placeholder="请输入12位数字（如：123456789012）">
<p><strong>掩码显示：</strong>{{ maskedInput || '——' }}</p>
<p><strong>原始值（用于提交）：</strong>{{ unmaskedInput || '——' }}</p>

2. 组件（TypeScript）

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  unmaskedInput: string = '';
  maskedInput: string = '';

  onInput(): void {
    const raw = this.unmaskedInput || '';

    // 仅处理纯数字且长度 ≤ 12 的输入
    if (!/^\d*$/.test(raw) || raw.length > 12) {
      // 可选：自动清理非法字符或截断
      this.unmaskedInput = raw.replace(/\D/g, '').slice(0, 12);
      return;
    }

    const digitsBeforeMasking = raw.substring(0, 8);
    const remaining = raw.substring(8);

    this.maskedInput = 
      digitsBeforeMasking.replace(/\d/g, 'X') + remaining;
  }
}

⚠️ 关键注意事项

• 必须导入 FormsModule：在 AppModule 中添加 import { FormsModule } from '@angular/forms'; 并将其加入 imports: [...] 数组，否则 ngModel 将无法识别。
• 避免在 (input) 中直接赋值 unmaskedInput：[(ngModel)] 已接管同步，手动赋值会引发冲突或脏检查异常。
• 输入校验建议：示例中加入了正则过滤非数字字符，并限制最大长度，提升用户体验与数据可靠性。
• 如使用响应式表单：可改用 formControlName + FormControl.valueChanges 监听，逻辑类似，但需配合 ReactiveFormsModule。

✅ 总结

实现安全、可控的输入掩码，核心在于分离「显示逻辑」与「数据源」：
? unmaskedInput 是唯一可信的数据源（由 ngModel 双向绑定保障）；
? maskedInput 是纯派生状态，仅用于视图渲染；
? onInput() 是纯计算函数，不修改源数据，只更新视图所需掩码。

该模式兼顾可维护性、可测试性与 Angular 最佳实践，适用于各类动态掩码场景（如手机号 138****1234、密码强度提示等）。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~