重置表单时如何保留日期文本框的当前值？

问题原因 #

表单的<input type="reset">默认行为是将所有表单元素恢复到页面加载时的初始值。你在onreset事件中调用getDate()，但该事件是在浏览器执行重置动作前触发的——执行完getDate()后，浏览器依然会执行默认重置，把文本框的值改回初始的空状态，所以最终看起来值没有保留。

解决方案 #

方案一：阻止reset默认行为，手动控制重置逻辑

通过阻止reset按钮的默认行为，自定义重置时的操作（包括更新当前日期）：

修改后的HTML：

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30"><br>
  <input type="reset" id="resetBtn">
</form>

修改后的JS：

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date + " " + m + " " + year + " " + d + " " + hour + ":" + (min <10?'0':'') + min;
  document.getElementById("date").value = datestring;
}

// 页面加载时初始化日期
getDate();

// 绑定重置按钮点击事件
document.getElementById('resetBtn').addEventListener('click', function(e) {
  // 阻止浏览器默认的重置行为
  e.preventDefault();
  // 若有其他表单字段需要重置，在此处添加逻辑，例如：
  // document.getElementById('otherInput').value = '';
  // 重新获取并设置当前日期
  getDate();
});

方案二：替换为普通按钮，手动实现重置逻辑

如果不需要表单默认的重置功能，直接用普通按钮替代reset按钮，自定义点击逻辑：

修改后的HTML：

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30"><br>
  <input type="button" value="Reset" onclick="handleReset()">
</form>

修改后的JS：

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date + " " + m + " " + year + " " + d + " " + hour + ":" + (min <10?'0':'') + min;
  document.getElementById("date").value = datestring;
}

function handleReset() {
  // 重置其他表单字段（若有）
  // document.getElementById('otherField').value = '';
  // 更新日期为当前时间
  getDate();
}

// 页面加载时初始化日期
getDate();

方案三：重置后回到页面加载时的日期

如果需求是重置后回到页面首次加载时的日期（而非当前时间），可以设置input的defaultValue：

修改后的JS：

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date + " " + m + " " + year + " " + d + " " + hour + ":" + (min <10?'0':'') + min;
  var dateInput = document.getElementById("date");
  dateInput.value = datestring;
  // 设置input的默认值，reset时会回到该值
  dateInput.defaultValue = datestring;
}

getDate();

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