HTML5 -onChange事件

问题描述 投票:18回答:5

当用户使用图形日历和箭头或使用键盘编号时,是否可能在onChange的事件<input type=“date”>中检测到?

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

javascript html5 onchange
5个回答
13
投票
这样的事情?

function handler(e){ alert(e.target.value); }
<input type="date" id="dt" onchange="handler(event);"/>

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

<< [change事件仅在日期选择器设置了有效日期并且值更改时发生。

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

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

有趣的是,当日期组件更改时,不会触发keypress事件,但是会触发

keyup

事件(即使未设置所有日期组件)。我还没有找到一种方法来提取未完成日期的当前设置值。有选项吗?与问题无关,但很有用:添加按键处理程序来监听键13(返回/输入)非常有用,当用户在网站上输入日期时,他们可以通过输入/返回键确认日期,因此无需切换键盘/鼠标之间是强制的。 总结:是的,如果设置了初始日期(或在流程中设置了完整的日期),并且处理了更改事件,则可以看到每个日期组件的更改。完成日期后,还可以在日期字段中跟踪用户操作。然后可以比较以前的日期值和当前的日期值,从而可以找出“光标”当前所在的位置。我猜想跟踪左/右/上/下键将不起作用,因为未知用户单击了哪个日期组件。

Update

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

2
投票

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'>
希望这会有所帮助。

0
投票
检查垃圾箱中的功能示例!

JSBin

如果使用Chrome,除非输入整个日期,否则不会触发该事件!


0
投票
以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);"/>
© www.soinside.com 2019 - 2024. All rights reserved.