Question

当用户使用图形日历和箭头或使用键盘号时，可以在事件onChange中检测到<input type=“date”>吗？

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

Answer 1

这样的东西？

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

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

如果您使用onchange进行诸如提交表单之类的操作，这将是一个真正的问题。您将获得带有不需要的值的表单提交，并且如上所述，可能会抛出异常的不良数据（例如，“ 0002-04-02”是有效的JS日期，但无效的SQL日期）。 / p>

我的解决方法是：

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

这意味着您的字段从日期选择器正确响应onchange，直到用户开始手动输入日期为止。。那时，onchange处理程序已删除（以防止过早触发），而您绑定了onblur（用于制表）和keyCode === 13（Enter键）。

唯一的缺点是，如果用户开始输入日期，然后改变主意并使用数据选择器，则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 3

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的示例的扩展）。

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

当输入字段失去焦点时，会触发 blur 事件。这也适用于移动浏览器（iOS）中显示的日期选择器。当用户按下“完成/确定”时，将触发模糊事件，该事件可用于处理选定的最终日期。同样在这里，当自旋轮停止并且日期组件之一发生更改时，更改事件就会触发。

有趣的是，日期组件更改时不会触发 keypress 事件，但是会触发 keyup 事件（即使未设置所有日期组件）。我还没有找到一种方法来提取未完成日期的当前设置值。有选择吗？

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

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

基于Alexander的评论针对Android的

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

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'>

希望这有帮助。

Answer 5

以YYYY-MM-DD格式设置日期

function getObject(object)
{
//  alert(object);
//  console.log(object);
  
  console.log(object.value); // result 2019-01-03
}

<input type="date" id="dt" onchange="getObject(this);"/>

Answer 6

是的，您可以，但请检查浏览器对日期时间支持的支持

检查bin是否有功能示例！

JSBin

如果是Chrome，则除非输入整个日期，否则不会触发事件！

HTML5 <input type =“”date“”/> - onChange事件

6 个答案: