似乎 Firefox 桌面只在焦点时运行更改事件，这不是简单地关闭<input type='date' />或<input type='time' />时发生的。不知何故，即使使用 Firefox，使用 Stack 溢出也无法重现此问题(如果您知道为什么......请告诉(。但是，如果您使用Firefox在本地主机上运行代码，您会发现它似乎每隔一段时间就可以工作。我相信这是因为当页面重新加载时，Firefox 会重新关注以前关注的元素。
那么，我所说的"工作"是什么意思？当您点击关闭按钮时，如果值为 === '' ，那应该得到console.log()，正如您在下面编写的代码中看到的那样。有时它不会被记录，并且值会变回空，因此它不起作用。更改事件无法使用 Firefox Quantum 67.0(64 位(触发。
//<![CDATA[
/* external.js */
var doc, bod, I, DateTime; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
DateTime = function(dateElement, timeElement, dateInstance){
var t = this;
this.dateElement = dateElement; this.timeElement = timeElement;
this.date = dateInstance instanceof Date ? dateInstance : new Date;
this.dateValue = function(dateInstance){
if(dateInstance instanceof Date)this.date = dateInstance;
var dt = this.date;
return dt.getFullYear()+'-'+(dt.getMonth()+1).toString().replace(/^(d)$/, '0$1')+'-'+dt.getDate().toString().replace(/^(d)$/, '0$1');
}
this.showDate = function(dateInstance){
this.dateElement.value = this.dateValue(dateInstance);
return this;
}
this.timeValue = function(dateInstance){
if(dateInstance instanceof Date)this.date = dateInstance;
var dt = this.date;
return dt.getHours().toString().replace(/^(d)$/, '0$1')+':'+dt.getMinutes().toString().replace(/^(d)$/, '0$1');
}
this.showTime = function(dateInstance){
this.timeElement.value = this.timeValue(dateInstance);
return this;
}
this.showDate().showTime();
this.dateChange = function(changeFunc, noDateFunc){
this.dateElement.onchange = function(){
var v = this.value;
if(v === ''){
console.log("t.dateElement.value === ''");
if(noDateFunc)t.showDate(noDateFunc(t));
}
else{
var s = t.timeElement.value;
if(s === '')s = t.timeValue(new Date);
t.date = new Date(v+' '+s);
}
changeFunc(t.date, t);
}
return this;
}
this.timeChange = function(changeFunc, noTimeFunc){
this.timeElement.onchange = function(){
var v = this.value;
if(v === ''){
console.log("t.timeElement.value === ''");
if(noTimeFunc)t.showTime(noTimeFunc(t));
}
else{
var s = t.dateElement.value;
if(s === '')s = t.dateValue(new Date);
t.date = new Date(s+' '+v);
}
changeFunc(t.date, t);
}
return this;
}
}
var hourTest = function(){
return new Date(Date.now()+3600000);
}
var dt = new DateTime(I('edit_date'), I('edit_time'), hourTest());
dt.dateChange(function(dateResult){
console.log(dateResult.toString());
}, hourTest).timeChange(function(timeResult){
console.log(timeResult.toString());
}, hourTest);
}); // end load
//]]>/* external.js */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
label,input{
font:22px Tahoma, Geneva, sans-serif;
}
label{
display:block; height:26px; font-weight:bold; margin:7px 0 4px; float:left;
}
input{
width:100%; height:38px; background:#fff; color:#000; padding:5px; border:1px solid #0b0; float:left;
}<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div id='content'>
<label for='edit_date'>Notify Date</label><input class='yes' id='edit_date' type='date' />
<label for='edit_time'>Notify Time</label><input class='yes' id='edit_time' type='time' />
</div>
</body>
</html>有没有办法保证更改事件发生，因为它似乎没有关注日期或时间，它可能只是决定不触发？
我不确定您看到的是否是错误，但是如果您无法找出change事件问题的解决方案，则可以尝试侦听输入事件。
每次元素的值更改时都会触发输入事件。这与 change 事件不同，change 事件仅在提交值时触发，例如按 Enter 键、从选项列表中选择值等。
从OP的评论中，要解决此问题，请将以下行从：
this.dateElement.onchange = function(){
this.timeElement.onchange = function(){
自：
this.dateElement.oninput = function(){
this.timeElement.oninput = function(){