如何用jQuery实现信用卡输入框自动空格格式化及提交去空格？

嘿，这个需求完全可以用jQuery轻松实现，而且比拆分四个输入框的用户体验要好得多！我给你整理一套完整的解决方案，包含输入时自动格式化、提交时清理空格，还有样式优化的细节：

1. 输入时自动添加空格 #

我们可以监听输入框的input事件，实时过滤非数字字符并按4位分组添加空格：

$(document).ready(function() {
  // 绑定信用卡输入框的输入事件
  $('#credit-card-input').on('input', function() {
    // 第一步：过滤掉所有非数字字符，只保留数字
    const rawValue = $(this).val().replace(/\D/g, '');
    // 第二步：把数字按每4位分割，用空格连接
    const formattedValue = rawValue.match(/.{1,4}/g)?.join(' ') || '';
    // 第三步：把格式化后的值放回输入框
    $(this).val(formattedValue);
  });
});

这段代码的好处是：用户输入时会自动分组，删除字符时也能自动调整空格位置，同时还能防止用户输入非数字内容。另外别忘了给输入框设置maxlength="19"（16位数字+3个空格），避免用户输入过多内容。

2. 表单提交时自动移除空格 #

提交表单前，我们需要把输入框里的空格全部清除，确保后端收到的是纯数字卡号：

// 监听表单提交事件
$('form').on('submit', function(e) {
  const cardInput = $('#credit-card-input');
  // 移除所有空格，得到纯数字卡号
  const cleanCardNumber = cardInput.val().replace(/\s/g, '');
  
  // 这里可以添加卡号格式验证（比如检查是否是16位数字）
  if (cleanCardNumber.length !== 16) {
    e.preventDefault(); // 阻止提交
    alert('请输入有效的16位信用卡卡号');
    return;
  }
  
  // 可以选择把清理后的值放回输入框，或者用隐藏字段存储
  cardInput.val(cleanCardNumber);
  // 也可以直接用cleanCardNumber作为参数发送请求，无需修改原输入框
});

3. 输入框样式优化（内边距+分组视觉提示） #

为了让分组更清晰，你可以给输入框添加内边距和字符间距，增强视觉效果：

#credit-card-input {
  padding: 12px 16px; /* 增加内边距，让输入内容更舒适 */
  font-size: 18px;
  letter-spacing: 3px; /* 增大字符间距，让4位分组更明显 */
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  width: 300px; /* 根据你的布局调整宽度 */
}

#credit-card-input:focus {
  outline: none;
  border-color: #2196F3; /* 聚焦时的边框颜色，提升交互反馈 */
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

额外提示 #

• 如果需要支持Amex等15位卡号的情况，可以调整正则或者逻辑，不过大部分场景16位就够用了。
• 可以结合keydown事件阻止用户输入空格（不过上面的代码已经过滤了非数字，所以其实不需要）。

这样一套下来，用户输入体验流畅，后端接收的也是纯数字，完美解决你的需求！

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