javascript - 检测 HTML5 日历元素上的日期选择，但不检测手动输入的日期

Question

当用户单击 HTML5 日历元素中的日期时，我需要能够运行 JavaScript 函数。我尝试使用onchange，但是当用户输入日期时它也会触发：

<input type="date" onchange="alert('fired');"/>

似乎在他们输入“完整”日期之前事件不会触发，这很简洁，但不符合我的需求。

有没有办法只在日历中单击日期时触发？或者可能在这两种情况下都开火，但检测到它是哪种类型的动作？

Answer 1

我想您想禁用键盘输入，因此用户只能通过鼠标选择有效日期。

您还想检测日历内的点击。

为此，我有这个答案的更新演示：

请注意点击处理程序将如何为无效日期的点击提供一个空字符串值。

InputDatePrevent 键盘

请注意，不建议在 HTML 属性中编写事件处理程序。

请参阅 https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval#Use_functions_instead_of_evaluating_snippets_of_code

这是演示的更新代码：

<input type="date"
    onchange="alert(window.event.type+' event handler for '+this.type+' noticed  \''+this.value+'\'');"
    onclick="alert(window.event.type+ ' event handler for '+this.type+ ' noticed  \''+this.value+'\'');"
    onkeydown="window.event.preventDefault();
alert(window.event.type+' event handler for '+this.type+' prevents keyboard input for value \''+this.value+'\'');"
    onkeypress="window.event.preventDefault();
alert(window.event.type+' event handler for '+this.type+' prevents keyboard input for value \''+this.value+'\'');"
    oninput="alert(window.event.type+' event handler for '+this.type+' noticed \''+this.value+'\'');" />