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

Question

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

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

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

有没有办法只在日历中单击日期时触发？或者也许在两种情况下都会触发，但检测它是哪种类型的操作？

Answer 1

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

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

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

请注意，对于无效日期的点击，点击处理程序将如何具有空字符串值。

InputDatePreventKeyboard

请注意，不建议在 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+'\'');" />