<input type="date"> - jQuery 捕获事件清除日期答案

【问题标题】：<input type="date"> - jQuery catch event clear date<input type="date"> - jQuery 捕获事件清除日期
【发布时间】：2019-04-03 12:38:42
【问题描述】：

当通过单击 x 删除日期时，我不知道如何捕捉清除日期的事件。 click 事件没有用，因为我得到了 change 事件。

HTML:

Date Field with clear x

我想在单击 x 时捕捉事件（见图）。有什么提示吗？

使用 jQuery v3.2.1 和 Bootstrap v3

【问题讨论】：

嗯，AFAIK 你可以在这里实现on change 事件以使其工作，但我认为你不能在点击 X 时捕捉到该事件。
你可以为它制作一个小提琴吗？
jsfiddle.net/qewyak05 快速小提琴。只需使用 jquery 中的on change。
使用onchange事件，然后检查$(this).val()是否为空

标签： javascript jquery html date events

【解决方案1】：

你可以只监听 change 事件。这个脚本应该在有或没有 jQuery 的情况下工作，并且会在设置值和单击清除按钮时写入控制台：

var input = document.getElementsByTagName('input')[0];

input.addEventListener('change', function(e) {
  if (!input.value)
    console.log('clear!');

  else
    console.log('value', input.value);
});

&lt;input type="date" /&gt;

【讨论】：

【解决方案2】：

谢谢 Keith，这对我的解决方案很有启发。

我在项目中使用了 jquery，所以我需要 jquery 中的解决方案。

这个 js 解决方案解决了一个问题，但另一个问题是：如果加载页面并通过单击清除按钮（“x”）删除日期值，则更改事件无法识别它。解决办法：

$('.date-input')
    .click(function(e) {
         $(this).focus();
    }
    .change(function(e) {
         var myValue = $(this);
         if (!myValue.val()) {
            // do something when cleared
         } else {
            // do something on changed date
         }
    });

HTML：

<input type="date" class="date-input" />

【讨论】：

“我在项目中使用了 jquery，所以我需要 jquery 中的解决方案。” 你不需要。 jQuery 只是 JS 之上的一堆帮助程序，你不需要一直使用它。如果你有不使用 jQuery 的代码，它仍然可以很好地与你需要它的代码配合使用。但是，是的 - 如果您想将我的答案翻译成 jQuery，它看起来像这段代码。您可能不需要click，因为它应该设置焦点（键盘事件也是如此）。