使用jQuery实现输入框自定义格式自动添加逗号（年,月,日格式）

嘿，我懂你想要的效果——输入日期数字时自动按「年,月,日」的格式插入逗号，而不是常见的「日,月,年」对吧？之前的代码逻辑是针对日在前的场景，咱们调整一下判断逻辑就能搞定。

核心思路调整 #

原来的代码是在输入到第2位、第5位时加逗号，对应「日,月,年」的分段；咱们需要改成第4位后加第一个逗号（年结束），第7位后加第二个逗号（月结束），同时要先移除已有逗号再处理，避免重复添加。

完整实现代码 #

// 监听键盘输入，处理逗号自动添加
$('#your-id').on('keyup', function(event) {
  // 遇到退格键直接返回，避免删除逗号后逻辑混乱
  if (event.keyCode === 8) return;

  // 先移除所有逗号，统一处理纯数字内容
  let rawValue = $(this).val().replace(/,/g, '');
  let formattedValue = '';

  // 按「年(4位)→逗号→月(2位)→逗号→日(2位)」的规则拼接
  if (rawValue.length > 4) {
    // 拼接年份部分
    formattedValue += rawValue.substring(0, 4) + ',';
    
    // 拼接月份和日期部分
    if (rawValue.length > 6) {
      formattedValue += rawValue.substring(4, 6) + ',' + rawValue.substring(6, 8);
    } else {
      formattedValue += rawValue.substring(4);
    }
  } else {
    // 年份未输入完，直接显示原内容
    formattedValue = rawValue;
  }

  // 只有当格式变化时才更新输入框，避免重复触发
  if (formattedValue !== $(this).val()) {
    $(this).val(formattedValue);
  }
});

// 可选：限制输入仅为数字，避免非数字字符干扰格式
$('#your-id').on('keydown', function(event) {
  // 允许数字、退格、Tab、左右箭头、删除键这些必要按键
  const allowedKeys = [8, 9, 37, 39, 46];
  const isNumberKey = (event.keyCode >= 48 && event.keyCode <= 57) || 
                      (event.keyCode >= 96 && event.keyCode <= 105); // 小键盘数字

  if (!isNumberKey && !allowedKeys.includes(event.keyCode)) {
    event.preventDefault();
  }
});

效果说明 #

• 输入2015 → 显示2015
• 输入201510 → 显示2015,10
• 输入20151022 → 显示2015,10,22
• 输入过程中自动分段，删除逗号后再输入也会重新正确格式化

这个逻辑会先把输入的内容转为纯数字，再按年、月、日的长度分段加逗号，完美匹配你的需求～

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