Question

使用HTML5日期字段时，每个键输入都会触发Chrome上字段的更改事件。

请参阅jsFiddle并尝试手动输入日期以查看效果： https://jsfiddle.net/hx3zcenj/4/

document.getElementById('dateFilter').addEventListener('change', function(){
    document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
}); //triggers on every keypress

我希望这个事件像普通文本字段一样触发，即从选择器中选择日期或模糊之后。我不希望每次输入一个角色时都会触发它。

这主要与Chrome有关，因为其他浏览器会以不同的方式处理此字段。

Answer 1

一旦日期输入具有所有三个字段，即dd，mm和yyyy;它开始触发。这是合乎逻辑的，因为日期包含所有字段，日期是有效日期，但可能对商业案例无效。

您可以绑定可以完成工作的blur事件。并提供其他属性，如最小值和最大值，这些属性也会触发错误。

如果您要绑定change事件，那么您应该做的第一件事就是检查数据是否有效且在范围内。

Answer 2

如何使用focusout事件代替。这将在他们离开现场/改变焦点时触发

＆＃13;

document.getElementById('dateFilter').addEventListener('focusout', function() {
  document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
});

＆＃13;

<input type="date" id="dateFilter">
<div id="msgContainer"></div>

＆＃13;

防止HTML5日期字段在按键上触发更改事件

2 个答案: