如何实现表单输入框未选中时的掩码？信用卡字段交互效果问询

我来帮你搞定这个需求，核心思路是用JavaScript监听输入框的**聚焦（focus）和失焦（blur）**事件，同时单独保存真实的信用卡号码——毕竟直接修改输入框值会丢数据，提交表单时还得用真实卡号。下面是完整的实现代码，很容易理解和调整：

1. 补全HTML结构 #

先给信用卡输入框加个唯一ID，方便JS操作，同时补充几个常见的表单字段做示例：

<form>
  <div class="form-group">
    <label>*Credit Card Number</label>
    <input type="text" id="credit-card" placeholder="1234 5678 9012 3456" maxlength="19">
  </div>
  <div class="form-group">
    <label>Cardholder Name</label>
    <input type="text" placeholder="John Doe">
  </div>
  <div class="form-group">
    <label>Expiration Date</label>
    <input type="text" placeholder="MM/YY">
  </div>
  <div class="form-group">
    <label>CVV</label>
    <input type="text" placeholder="123" maxlength="4">
  </div>
  <button type="submit">Submit</button>
</form>

2. 核心JavaScript逻辑 #

这部分是实现掩码效果的关键，会实时保存真实卡号、处理聚焦/失焦时的显示切换：

// 获取信用卡输入框元素
const creditCardInput = document.getElementById('credit-card');
// 单独存储真实的信用卡号码，避免丢失数据
let realCardNumber = '';

// 监听输入事件，实时同步真实卡号，还可加自动格式化（每4位加空格）
creditCardInput.addEventListener('input', function(e) {
  // 去掉所有空格，保存纯数字的真实卡号
  realCardNumber = e.target.value.replace(/\s/g, '');
  // 自动格式化显示（可选，提升用户输入体验）
  e.target.value = realCardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
});

// 聚焦输入框时，恢复显示真实卡号
creditCardInput.addEventListener('focus', function() {
  this.value = realCardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
});

// 失焦时，替换为掩码格式
creditCardInput.addEventListener('blur', function() {
  if (realCardNumber.length > 4) {
    // 默认保留最后4位（更符合实际使用场景），前面用*填充
    const maskedNumber = '*'.repeat(realCardNumber.length - 4) + realCardNumber.slice(-4);
    // 给掩码也加上空格格式化（可选）
    this.value = maskedNumber.replace(/(\*{4})(?=\*)/g, '$1 ');
  } else {
    // 如果卡号长度不足4，直接显示输入内容
    this.value = realCardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
  }
});

3. 补充基础CSS（优化表单样式） #

结合你已有的基础CSS，这里补充一些让表单更美观的样式：

.form-group {
  margin-bottom: 1.5rem;
}
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}
button {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
button:hover {
  background-color: #0056b3;
}

可调整的细节 #

• 如果不需要卡号自动加空格，删掉所有带replace(/(\d{4})(?=\d)/g, '$1 ')的代码即可；
• 要是想让失焦时显示全*（比如************），把blur事件里的maskedNumber改成'*'.repeat(realCardNumber.length)就行。

内容的提问来源于stack exchange，提问作者B. Bee