Angular输入框掩码：隐藏前8位显示后4位

本文深入解析了在 Angular 中实现银行卡号等敏感数字输入掩码（如 XXXXXXXX1234）的关键技术要点，直击单向绑定导致原始值丢失、掩码逻辑错乱的常见陷阱，强调必须分离原始输入（unmaskedInput）与展示用掩码值（maskedInput），并通过 ngModel 双向绑定或响应式表单精准控制数据流向；不仅提供可立即运行的清洗、截断、动态掩码完整代码，还点明 FormsModule 导入、光标定位、粘贴处理及封装为可复用指令等进阶实践，助你构建安全、健壮、符合金融级体验的前端输入控件。

本文介绍如何在 Angular 中正确实现输入掩码功能——将用户输入的 12 位数字（如银行卡号）自动隐藏前 8 位为 'X'，仅显示后 4 位，同时确保原始值与掩码值双向独立、准确同步。

本文介绍如何在 Angular 中正确实现输入掩码功能——将用户输入的 12 位数字（如银行卡号）自动隐藏前 8 位为 'X'，仅显示后 4 位，同时确保原始值与掩码值双向独立、准确同步。

在 Angular 中实现输入掩码（例如 XXXXXXXX1234）看似简单，但若使用单向绑定 [value] 配合 (input) 事件手动更新，极易导致数据流混乱——正如问题中所示：unmaskedInput 被错误地赋值为已掩码后的字符串，丧失原始输入信息。

根本原因在于：[value]="maskedInput" 是单向绑定，它只控制视图显示，却不接收用户输入的真实值；而 (input) 事件中读取的 event.target.value 实际上是当前 <input> 元素的渲染后值（即 maskedInput），而非用户刚键入的原始字符。因此，this.unmaskedInput = event.target.value 实质上将掩码结果又赋给了原始字段，形成逻辑闭环错误。

✅ 正确做法是：让原始输入值（unmaskedInput）真实承载用户键入内容，并通过计算属性或响应式逻辑生成掩码视图。推荐使用 ngModel 双向绑定（需导入 FormsModule）来可靠同步原始输入：

<!-- app.component.html -->
&lt;input 
  type=&quot;text&quot; 
  [(ngModel)]=&quot;unmaskedInput&quot; 
  (input)=&quot;onInput()&quot; 
  maxlength=&quot;12&quot;
  placeholder=&quot;请输入12位数字（如：123456789012）&quot;&gt;
<p>掩码显示: {{ maskedInput }}</p>
<p>原始值: {{ unmaskedInput }}</p>

// app.component.ts
import { Component } from '@angular/core';

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

  onInput(): void {
    // 确保只处理数字，且截取最多12位
    const cleanValue = this.unmaskedInput.replace(/\D/g, '').slice(0, 12);
    this.unmaskedInput = cleanValue;

    // 前8位替换为'X'，后4位保留（不足则全显）
    const visiblePart = cleanValue.length > 8 ? cleanValue.substring(8) : cleanValue;
    const maskedPart = 'X'.repeat(Math.min(8, cleanValue.length));
    this.maskedInput = maskedPart + visiblePart;
  }
}

? 关键注意事项：

• 必须在 AppModule 中导入 FormsModule，否则 ngModel 不可用；
• onInput() 中优先对 unmaskedInput 做清洗（去除非数字字符）和长度限制，避免脏数据干扰掩码逻辑；
• 掩码逻辑应基于 cleanValue 计算，而非直接操作 event.target.value；
• 若项目已采用响应式表单（ReactiveFormsModule），可改用 FormControl + valueChanges 监听，配合 patchValue({ emitEvent: false }) 避免循环触发。

? 进阶提示：如需支持光标定位、粘贴处理或更复杂的格式化（如空格分隔 XXXX XXXX XXXX），建议封装为自定义 ControlValueAccessor 指令，实现真正可复用的掩码输入控件。

通过分离「原始数据源」与「展示派生值」，并依托 Angular 的双向绑定机制，即可稳健、可维护地实现安全敏感字段的前端掩码显示。

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