HTML5 <input type ="date"> - onChange事件

Question

是可能的事件来检测onChange用于<input type=“date”>,当用户使用图形日历和箭头或使用 keybord数目？

我只对VanillaJS解决方案感兴趣.

Answer 1

像这样的东西？

function handler(e){
  alert(e.target.value);
}

<input type="date" id="dt" onchange="handler(event);"/>

Answer 2

function elog(ev, object) {
    console.log(object.id + " - " + ev + ": " + object.value); 
}

<label for="dt1">Date not initially set: </label>
<input type="date" id="dt1" 
oninput="elog('input',this);return false;"
onchange="elog('change',this);return false;"
onblur="elog('blur',this);return false;"					 
onfocus="elog('focus',this);return false;"
onkeyup="elog('keyup-'+event.keyCode,this);return false;"
onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" />

<label for="dt2">Date set to 1.12.1892 initially: </label>
<input type="date" id="dt2" 
value="1892-12-01"
oninput="elog('input',this);return false;"
onchange="elog('change',this);return false;"
onblur="elog('blur',this);return false;"					 
onfocus="elog('focus',this);return false;"
onkeyup="elog('keyup-'+event.keyCode,this);return false;"
onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" />

我在确定日期选择器是由用户完成还是关闭时遇到了类似的问题。因此，我测试了更改、模糊、选择和聚焦事件，如代码示例（antelove 示例的扩展）所示。

该变化仅在日期选择器具有有效日期设置和值发生改变事件。该输入事件的行为如出一辙。在某些情况下，这可能会导致不受欢迎的行为。当已经设置了有效日期（例如 01.12.1892）并且用户开始输入新的 4 位数年份时，输入第一位数字后将触发更改事件（例如，1994 => 输入第一位数字后出现更改事件'1'）。如果使用后端，则可能不希望将所有更改发送到服务器，而只将最后选择的日期发送到服务器（如果用户中止，则不发送）。

在模糊时，输入字段失去焦点事件被触发。这也适用于移动 safari (iOS) 上显示的日期选择器。当用户按下“完成/确定”时，会触发模糊事件，该事件可用于处理所选的最终日期。同样，当旋转轮停止并且日期组件之一发生更改时，更改事件也会触发。

有趣的是，按键事件不会触发时的日期分量的变化，但是KEYUP事件被触发（即使不是所有的日期组件设置）。我还没有找到一种方法来提取不完整日期的当前设定值。有没有选择？

与问题无关但很有用：添加按键处理程序来侦听键 13（回车/回车）非常有用，当用户在网站上输入日期时，他们可以通过回车/回车键确认日期，因此无需在键盘之间切换/mouse 是强制的。

总结：是的，如果设置了初始日期（或在流程中设置了完整日期）并处理了更改事件，则可以看到每个日期组件的更改。还可以在日期完成时跟踪日期字段中的用户操作。然后可以比较以前和当前的日期值，从而可以找出“光标”当前所在的位置。我想跟踪左/右/上/下键将不起作用，因为不知道用户单击了哪个日期组件。

基于 Alexanders 评论的 Android更新：似乎在 android 浏览器中，datepicker 元素仍处于选中状态，即焦点，当 datepicker 关闭时，请参阅示例. 在示例中，我单击了日期选择器弹出窗口中的一个日期，然后单击了日期选择器之外的一个区域。之后我点击了“清除”，再次在日期选择器元素之外。在所有情况下，单击日期选择器外（弹出窗口关闭后）都会导致模糊事件被触发。由于在所有情况下都会触发更改事件，因此最好的处理方法可能是实现更改的处理程序和模糊处理程序来捕获这两种情况。但要完全确定后 wimp 交互样式（如触摸）的行为，应测试手机上的所有浏览器。如果各种移动浏览器的实现不同，我不会感到惊讶。

Answer 3

通常，onchange“当用户提交对元素值的更改时”触发。但是对于<input type='date'>字段，主要的浏览器开发人员会onchange在检测到字段中的“有效”日期时立即触发，即使您仍在键入。他们这样做是onchange为了在用户从（特定于浏览器的）数据选择器/日历中选择一个值时触发。基本上没有好的方法可以区分日期选择器输入的日期值和用户手动输入的日期值。

如果您习惯于onchange执行诸如提交表单之类的操作，这将是一个真正的问题。您将收到带有您不想要的值的表单提交，并且如上所述，可能是可能引发异常的错误数据（例如，'0002-04-02' 是一个有效的 JS 日期，但一个无效的 SQL 日期）。

我的解决方案是这样的：

1. 将您想要的操作绑定到onchange事件
2. 在onkeypress事件：
   1. 解除onchange绑定
   2. 将您想要的操作绑定到onblur事件
   3. 添加 if (e.keyCode === 13) { doYourThing(); }

这意味着您的字段会正确响应onchange日期选择器，直到用户开始手动输入日期。那时，onchange处理程序被移除（以防止过早触发），而您改为绑定onblur（用于跳出）和keyCode === 13（回车键）。

唯一的缺点是，如果用户开始输入日期，然后改变主意并使用数据选择器，onchange则不会触发并且您的操作不会发生，直到onblur或者他们按下 Enter 键。

我知道 OP 要求纯 JS，但这是我的 jQuery 版本。

$('input[type=date]').change(function () {
    this.form.submit();
});

$('input[type=date]').keypress(function (e) {
    $(this).off('change blur');

    $(this).blur(function () {
        this.form.submit();
    });

    if (e.keyCode === 13) {
        this.form.submit();
    }
});

编辑：onblur在重新绑定之前取消绑定事件，这样您就不会获得多个绑定事件。

Answer 4

您可以使用两个事件onchange事件，但您的字段应首先初始化：

var date_input = document.getElementById('date_input');
date_input.valueAsDate = new Date();

date_input.onchange = function(){
   console.log(this.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id='date_input'>

希望这可以帮助。