格式化表单输入字段

Question

如何格式化表单输入字段，使其仅接受用户输入的数字、最多 16 位数字，并在每四位数字后添加一个空格？我正在尝试创建一张借记卡，以便用户在表单输入字段中输入的数据在侧面显示的卡上实时更新。我希望卡号排列成四个，就像真实的卡上一样。

我尝试将用户输入保存在变量中，然后使用循环在每四位数字后插入一个空格。好吧，我不知道为什么，但它不起作用。

Answer 1

我使用侦听器和正则表达式做了一个简单的示例。

const input = document.querySelector('input');
const show = document.querySelector('.card-number');

input.addEventListener('input', () => {
  const cardNumber = input.value.replace(/\s/g, '');
  const formatted = cardNumber.match(/.{1,4}/g).join(' ');
  show.textContent = formatted;
});

.card-preview {
  width: 250px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
}

.card-number {
  font-size: 18px;
  font-weight: bold;
}

<input type="text" placeholder="Enter Card Number" maxlength="16">
  <div class="card-preview">
    <div class="card-number"></div>
    <!--<div class="card-number">XXXX XXXX XXXX XXXX</div>-->
  </div>