我有一个很简单的表格。当用户在输入字段中键入时,我想更新他们在页面上其他地方键入的内容。一切正常。我已将更新绑定到keyup
、change
和click
事件。
唯一的问题是,如果您从浏览器的自动完成框中选择一个输入,它不会更新。当您从“自动完成”中选择时,是否会触发任何事件(显然既不是更改
也不是单击
)。注意,如果您从“自动完成”框中选择“模糊输入”字段,将触发更新。我希望它能在自动完成时被触发。
请参见:http://jsfidle.net/pykkp/(希望您过去用名为“email”的输入填写过很多表单)。
<input name="email" />
<div id="whatever"><whatever></div>
div {
float: right;
}
$("input").on('keyup change click', function () {
var v = $(this).val();
if (v) {
$("#whatever").text(v);
}
else {
$("#whatever").text('<whatever>');
}
});
我建议使用monitorevents
。它是web inspector和firebug中javascript控制台提供的一个函数,它打印出元素生成的所有事件。下面是如何使用它的示例:
monitorEvents($("input")[0]);
在您的示例中,当用户从autocomplete下拉菜单中选择一个项目时,Firefox和Opera都会生成input
事件。在IE7-8中,change
事件是在用户更改焦点之后产生的。最新的Chrome确实产生了类似的事件。
详细的浏览器兼容性图表可在此找到:
https://developer.mozilla.org/en-us/docs/web/events/input