当输入类型为"date"的输入框首次清空日期时，onchange事件未触发。

Question

当输入类型为"date"的输入框首次清空日期时，onchange事件未触发。

5

我有一个type="date"的输入框，当它发生改变时会触发一些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);
}

<input type="date" id="MyID" value="2018-02-06" onchange="myFunction('MyID');">

- CMArg

2

代码片段是否有效？ - Expressingx

代码片段中有相同的问题。我一直在检查。Firefox：问题与提问中报告的一样，Chrome：没有问题，IE：没有像Firefox和Chrome那样的“删除日期”选项。 - CMArg

3

使用原生日期输入字段跨浏览器获得相同的体验是很困难的。您可以查看 MDN 文档以了解有关跨浏览器支持的信息。您也可以尝试使用第三方插件来在各种浏览器中实现相同的体验。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Handling_browser_support - Andrew Lohr

@AndrewLohr 是的，你说得对。日期输入还比较初级。谢谢！ - CMArg

3个回答

1

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

我正在使用jQuery，我的解决方案是在绑定事件后调用focus和blur。

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

因为只有在用户在输入之前点击重置按钮时才会出现此错误。通过设置和删除输入的焦点，用户不会注意到任何问题，从而绕过了这个错误。

- Squall

1

我也遇到了同样的问题（在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);
});

- Richard Bale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- illuminardy · Accepted Answer

我试过了，可行。

我创建了一个包含以下内容的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）。

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