解决JS中鼠标悬停时日期输入框被清空的问题

问题根源 #

你遇到的核心问题是：date类型输入框只识别**ISO标准格式（YYYY-MM-DD）**的日期值，但在mouseout事件中，你把输入值转换成了MM/DD/YYYY的文本格式。再次切换回date类型时，浏览器无法解析非ISO格式的文本，导致输入框被清空。

解决方案 #

通过给输入框添加自定义属性存储原始ISO格式的日期值，在类型切换时复用这个值，避免格式不兼容导致的重置：

修改后的代码 #

JavaScript

window.addEventListener("DOMContentLoaded", function() {
  const inputField = document.getElementById("dateinput");
  const placeholderText = "Date Final Product Needed";

  // 初始化：处理输入框可能存在的初始值
  if (inputField.value && inputField.value !== placeholderText) {
    try {
      const date = new Date(inputField.value);
      date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
      inputField.dataset.originalDate = date.toISOString().split('T')[0];
    } catch(e) {
      delete inputField.dataset.originalDate;
    }
  }

  inputField.addEventListener("mouseover", function() {
    inputField.type = "date";
    // 切换为date类型时，用存储的ISO值赋值
    if (inputField.dataset.originalDate) {
      inputField.value = inputField.dataset.originalDate;
    } else {
      inputField.value = "";
    }
  });

  inputField.addEventListener("mouseout", function() {
    inputField.type = "text";
    // 先保存当前date的ISO格式值
    if (inputField.value) {
      inputField.dataset.originalDate = inputField.value;
      const date = new Date(inputField.value);
      date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
      const formattedDate = date.toLocaleDateString("en-US", {
        month: "2-digit",
        day: "2-digit",
        year: "numeric",
      });
      inputField.value = formattedDate;
    } else {
      delete inputField.dataset.originalDate;
      inputField.value = placeholderText;
    }
  });
});

HTML

<input type="text" id="dateinput" placeholder="Date Final Product Needed">

关键优化点 #

• 用data-original-date自定义属性持久化存储ISO格式日期，确保类型切换时浏览器能识别有效日期
• 初始化阶段处理输入框初始值，避免首次悬停出现异常
• 明确区分提示文本与有效日期值，避免逻辑混淆

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