` 和 `` 在 Firefox 中有 onchange 问题？还是我错过了什么？,javascript,html,css"/>
时间戳

首页 > 解决方案 > 为什么`` 和 `` 在 Firefox 中有 onchange 问题？还是我错过了什么？

javascript - 为什么`` 和 `` 在 Firefox 中有 onchange 问题？还是我错过了什么？

问题描述

似乎 Firefox 桌面仅在焦点时运行更改事件，这不会发生在简单的关闭<input type='date' />或<input type='time' />. 不知何故，使用 Stack Overflow 无法重现此问题，即使使用 Firefox (If you know why...do tell) 也是如此。但是如果你在 localhost 上运行代码，使用 Firefox，你会发现它似乎每隔一段时间就可以工作。我相信这是因为当页面重新加载时，Firefox 会重新关注之前关注的元素。

那么，我所说的“工作”是什么意思？当您点击关闭按钮时，如果值为=== ''，则应该得到console.log()ed，正如您从我在下面编写的代码中看到的那样。有时它没有被记录并且值变回空，所以它不起作用。使用 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>

有没有什么办法可以保证发生了变化事件，因为似乎没有关注日期或时间，它可能只是决定不触发？

标签： javascripthtmlcss

解决方案

我不确定您所看到的是否是错误，但如果您无法找出change事件问题的解决方案，您可以尝试侦听输入事件。

每次元素的值发生变化时都会触发输入事件。这与 change 事件不同，后者仅在提交值时触发，例如通过按下 enter 键、从选项列表中选择一个值等。

从 OP 的评论中，要解决此问题，请从以下位置更改这些行：

this.dateElement.onchange = function(){

this.timeElement.onchange = function(){

至：

this.dateElement.oninput = function(){

this.timeElement.oninput = function(){

推荐阅读