如何防止在Chrome中输入日期“type=”来回移动

<input type="date" />

<input type="text" id="dateInput" />

<script>
  const dateInput = document.getElementById("dateInput");
  dateInput.addEventListener("keydown", function(event) {
    const allowedKeys = [8, 9, 37, 39, 46]; // 允许的键盘按键：退格、Tab、左右箭头、删除
    const allowedSeparators = ["/", "-"]; // 允许的日期分隔符

    if (
      !(
        (event.key >= "0" && event.key <= "9") || // 数字键
        allowedKeys.includes(event.keyCode) || // 允许的按键
        allowedSeparators.includes(event.key) // 允许的分隔符
      )
    ) {
      event.preventDefault(); // 阻止输入
    }
  });
</script>

<input type="text" id="dateInput" />

<script>
  const dateInput = document.getElementById("dateInput");
  dateInput.addEventListener("blur", function() {
    const inputValue = dateInput.value;
    const dateRegex = /^\d{4}[-/]\d{2}[-/]\d{2}$/; // 日期格式正则表达式

    if (!dateRegex.test(inputValue)) {
      // 如果输入的日期格式不正确，进行格式化
      const parts = inputValue.split(/[-/]/);
      const formattedDate = `${parts[0]}-${parts[1].padStart(2, "0")}-${parts[2].padStart(2, "0")}`;
      dateInput.value = formattedDate;
    }
  });
</script>