如何用HTML、CSS和Angular实现信用卡号输入框自定义placeholder效果

实现思路 #

用隐藏的原生输入框处理用户输入（保证数字输入的兼容性），同时用可视化容器渲染固定模板（xxxx-xxxx-xxxx-xxxx），输入的数字会自动填充到对应位置，未填充的位置保留灰色占位符x，分隔符始终显示且不受输入影响。

代码实现 #

1. 组件HTML模板

<div class="credit-card-input-container" (click)="hiddenInput.focus()">
  <div class="input-group">
    <span *ngFor="let char of group1; let i=index" class="char">{{ char || '' }}</span>
  </div>
  <span class="separator">-</span>
  <div class="input-group">
    <span *ngFor="let char of group2; let i=index" class="char">{{ char || '' }}</span>
  </div>
  <span class="separator">-</span>
  <div class="input-group">
    <span *ngFor="let char of group3; let i=index" class="char">{{ char || '' }}</span>
  </div>
  <span class="separator">-</span>
  <div class="input-group">
    <span *ngFor="let char of group4; let i=index" class="char">{{ char || '' }}</span>
  </div>
  <!-- 隐藏的原生输入框，用于处理输入逻辑 -->
  <input 
    #hiddenInput 
    type="text" 
    class="hidden-input" 
    (input)="onInputChange($event)"
    maxlength="16"
    inputmode="numeric"
  >
</div>

2. 组件CSS样式

.credit-card-input-container {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 18px;
  cursor: text;
  gap: 4px;
}

.input-group {
  display: flex;
  gap: 2px;
}

.char {
  width: 20px;
  text-align: center;
  color: #2d3748;
}

/* 未输入的位置显示灰色x */
.char:empty::before {
  content: 'x';
  color: #a0aec0;
}

.separator {
  color: #2d3748;
}

/* 隐藏原生输入框，但保留其输入功能 */
.hidden-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  border: none;
  padding: 0;
  margin: 0;
}

3. 组件TypeScript逻辑

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

@Component({
  selector: 'app-credit-card-input',
  templateUrl: './credit-card-input.component.html',
  styleUrls: ['./credit-card-input.component.css']
})
export class CreditCardInputComponent {
  // 四个分组，每组4个字符位置
  group1: string[] = new Array(4).fill('');
  group2: string[] = new Array(4).fill('');
  group3: string[] = new Array(4).fill('');
  group4: string[] = new Array(4).fill('');

  onInputChange(event: Event) {
    const inputEl = event.target as HTMLInputElement;
    // 过滤掉非数字字符
    const pureDigits = inputEl.value.replace(/\D/g, '');

    // 将数字分配到对应分组
    this.group1 = this.fillGroup(pureDigits.slice(0, 4));
    this.group2 = this.fillGroup(pureDigits.slice(4, 8));
    this.group3 = this.fillGroup(pureDigits.slice(8, 12));
    this.group4 = this.fillGroup(pureDigits.slice(12, 16));
  }

  // 辅助方法：填充单个分组，不足4位的位置留空
  private fillGroup(digits: string): string[] {
    return digits.split('').concat(new Array(4 - digits.length).fill(''));
  }
}

功能说明 #

• 点击输入容器时自动聚焦到隐藏的原生输入框，支持数字键盘唤起（inputmode="numeric"）
• 输入数字时自动填充到对应位置，未填充的位置显示灰色x
• 分隔符-固定显示，不会被输入内容覆盖或删除
• 自动过滤非数字字符，只保留有效信用卡号数字

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