网页文本框限制输入的格式为1999-01-02，输入数字后 - 会自动加上

最新推荐文章于 2024-04-26 16:47:03 发布

黯然神伤888

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量161

点赞数

分类专栏： JS和CSS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dante1987/article/details/133267906

版权

JS和CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页文本框限制输入的格式为1999-01-02，输入数字后 - 会自动加上

<!DOCTYPE html>
<html>
<head>
  <title>限制输入格式</title>
</head>
<body>
  <input type="text" id="dateInput" onkeypress="limitInput(event)" onkeyup="formatDate(event)">
  
  <script>
    function limitInput(event) {
      const input = event.target;
      const maxLength = 8; // 最大允许输入 8 个数字

      if (input.value.replace(/[^0-9]/g, '').length >= maxLength && event.keyCode !== 8) { // keyCode 为 8 表示 Backspace 键
        event.preventDefault();
      }
    }
    
    function formatDate(event) {
      const input = event.target;
      let value = input.value.replace(/[^0-9]/g, ''); // 移除非数字字符
      
      if (value.length > 8) {
        value = value.substr(0, 8); // 限制输入长度为 8
      }
      
      if (value.length >= 5) { // 处理年份和月份
        value = value.replace(/^(\d{4})(\d{0,2})(\d{0,2})/, function(match, p1, p2, p3) {
          // 限制月份最小为 01，最大为 12
          const month = p2 ? Math.min(Math.max(parseInt(p2, 10), 1), 12).toString().padStart(2, '0') : '';
          
          // 限制日期最小为 01，最大为 30
          const date = p3 ? Math.min(Math.max(parseInt(p3, 10), 1), 30).toString().padStart(2, '0') : '';
          
          return p1 + (month ? '-' + month : '') + (date ? '-' + date : '');
        });
      }
      
      input.value = value;
    }
  </script>
</body>
</html>