如何通过keyup事件与replace方法实现YY/MM/DD格式输入限制

直接基于你的现有代码逻辑，通过扩展replace方法和长度限制，就能实现自动格式化需求，完整代码如下：

$(document).on("keyup", "input.form-control", function() {
  let value = $(this).val().replace(/[^0-9]/g, ''); // 仅保留输入中的数字
  // 分两步插入斜杠，构建YY/MM/DD格式
  value = value.replace(/(\d{2})(?=\d)/, '$1/')
              .replace(/(\d{2}\/\d{2})(?=\d)/, '$1/')
              .slice(0, 8); // 限制总长度为8，刚好匹配YY/MM/DD的完整格式
  $(this).val(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="YY/MM/DD">

代码逻辑说明 #

1. 纯数字过滤：先用replace(/[^0-9]/g, '')清除所有非数字字符，包括可能残留的斜杠，确保后续格式化基于纯数字输入。
2. 自动插入斜杠：
   • 第一个replace：当输入满2位数字且后面还有数字时，自动在第2位后插入斜杠，对应YY/的格式。
   • 第二个replace：当输入满4位数字（即已形成YY/MM的数字部分）且后面还有数字时，自动在MM后插入斜杠，对应YY/MM/的格式。
3. 长度限制：用slice(0,8)限制内容最长为8个字符，刚好匹配YY/MM/DD的完整长度，避免输入过多无效字符。

该逻辑同时兼容删除操作：当用户删除数字时，斜杠会随数字的减少自动消失，重新输入时再按规则生成。

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