当输入类型=“日期”的日期明确为第一个操作时，onchange 不会触发答案

【问题标题】：onchange not firing when date of input type="date" is clear as first action当输入类型=“日期”的日期明确为第一个操作时，onchange 不会触发
【发布时间】：2018-02-06 14:56:07
【问题描述】：

我有一个type="date" 输入，onchange 会触发一些 JS。我的问题是，如果您想使用输入标签右侧的“十字按钮”清除日期，它不会触发 onchange 事件，除非您之前更改了该值。这对我来说真的很奇怪。我的问题：当我的第一个动作是单击删除日期的“十字按钮”时，我可以触发 JS 吗？

我使用的是 Firefox 58.0.1

编辑：现在如果按预期工作（2020 年 9 月，Firefox 80.0.1）

function myFunction(IdTag) {
var x = document.getElementById(IdTag).value;
    alert('The new value is: '+x);
}

&lt;input type="date" id="MyID" value="2018-02-06" onchange="myFunction('MyID');"&gt;

【问题讨论】：

在代码 sn-p 中工作？
代码 sn-p 中的同样问题。我一直在检查。 Firefox：问题中报告的问题，Chrome：没问题，IE：没有“删除日期”作为FF和Chrome。
使用原生日期输入字段很难跨浏览器获得相同的体验。您可以查看有关跨浏览器支持的 MDN 文档。您也可以尝试使用第三方插件来获得跨浏览器的相同体验developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
@AndrewLohr 是的，你是对的。日期输入相当初期。谢谢！

标签： javascript onchange

【解决方案1】：

为我工作。

我创建了一个包含以下内容的 html 文件：

<html>
  <head></head>
  <body>
    <input type="date" id="MyID" value="2018-02-06" onchange="myFunction('MyID');">
    <script>
      function myFunction(IdTag) {
        var x = document.getElementById(IdTag).value;
        alert('The new value is: '+x);
      }
    </script>
  </body>
</html>

事件触发并清除了日期（设置为 MM/DD/YYYY）。

确保您在开发者工具中没有看到任何错误。

【讨论】：

在 Firefox 中，输入字段显示日期和用于清除输入的按钮（在输入内部，在右侧）。如果是执行的第一个操作，则该按钮不会触发 onchange 事件。虽然它在 Chrome 中运行良好。我的IE版本没有说按钮。

【解决方案2】：

我也遇到了同样的问题（Linux 上的 FF 64.0.1），我通过使用“mousedown”事件解决了这个问题。

基本上，当 mousedown 事件触发设置一个计时器时，该计时器将在一定时间后手动触发日期输入的 onchange，我发现 500 毫秒对于我的用例来说已经足够了。

我正在使用 jQuery 并让它工作，这个过程应该与原生 JS 非常相似：

$('input[name="start_date"]').on('mousedown',function() {
    var $this = $(this);
    setTimeout(function(){ $($this).trigger('change'); }, 500);
});

【讨论】：

【解决方案3】：

我遇到了同样的问题，经过一番研究，我发现已经有一个未经证实的错误报告at Mozilla Bugtracker。

我正在使用 jQuery，我的解决方案是在绑定后调用焦点和模糊

$('#datefield').on('change', someFunction).focus().blur();

因为只有在将焦点放在输入之前单击重置按钮时才会出现该错误。通过设置和移除对输入的焦点，用户将无法识别任何内容并绕过该错误。

【讨论】：