如何检测InputElement系统选择器未修改即关闭的触发事件

先看这段代码：

var input  = document.createElement("input");
input.type = "datetime-local";

input.onchange = function() { 
 console.log("date set");
} 

input.showPicker();

这段代码会弹出日期/时间选择器，用户选择日期时onchange事件会正常触发，但如果用户点击选择器外部取消操作，onblur事件并不会生效。

可行解决方案：利用showPicker()返回的Promise #

现代浏览器中，input.showPicker()会返回一个Promise，当选择器被关闭（无论用户是确认选择还是取消）时，这个Promise都会resolve。我们可以通过对比操作前后的输入框值，判断用户是否取消了选择：

var input = document.createElement("input");
input.type = "datetime-local";
// 保存选择器弹出前的初始值
const initialValue = input.value;

input.onchange = function() { 
  console.log("date set");
} 

// 监听选择器关闭事件
input.showPicker().then(() => {
  // 对比当前值与初始值，判断是否为取消操作
  if (input.value === initialValue) {
    console.log("用户取消了日期选择");
  }
});

这种方法不需要额外创建全屏div，直接利用API本身的特性处理，更简洁高效。该方案支持Chrome 99+、Edge 99+、Safari 15.4+，主流现代浏览器都已兼容。

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