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+'\'');" />

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

1 个答案: