<input type="date">事件侦听器:如何区分鼠标选择与键盘输入
<input type="date">事件侦听器:如何区分鼠标选择与键盘输入
提问于 2018-08-11 02:48:45
我使用原生的HTML日期选择器。我希望实现当浏览器提供的日期选择器选择日期时提交父表单。如果日期是通过键盘输入的，我只想在按下enter键或焦点输出时提交。
现在我的问题是我无法区分日期选择器输入和键盘输入，至少在Firefox中是这样。下面是一些例子：
$(this).on('input', function(event) {
console.log(event.type);
}这总是记录“输入”，不管我做什么--我期望它是"click“或"keydown”或类似的东西。
on(' click ')处理程序仅在我单击输入字段时触发，而不是在日期选择器中单击某些内容时触发。
有没有人能把我推向正确的方向？
非常感谢菲利普
回答 3
Stack Overflow用户
发布于 2018-08-11 03:08:39
您需要附加一个同时支持这两种事件类型的事件。使用JQuery：
$('a.save').bind('mousedown keypress', submitData(event, this));
然后创建一个JS条件：
function submitData(event, id)
{
if(event.type == 'mousedown')
{
// do something
return;
}
if(event.type == 'keypress')
{
// do something else
return;
}
}Stack Overflow用户
发布于 2018-08-11 03:25:52
你可以在这张图中找到所有的事件列表。
$('input').on('blur', function(event) {
alert(event.type);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
你可以像上面的例子一样应用所有的event。上面的例子在input上应用了blur event。
Stack Overflow用户
发布于 2018-08-13 01:22:03
我做了一个接近于我想要的解决方法：
$('#eooMainForm input[type="date"]')
.each(function() {
$(this).data('serialized', $(this).serialize());
$(this).on('focusout', function() {
if($(this).serialize() != $(this).data('serialized')) {
$("#eooMainForm").form('submit');
}
});
$(this).on('keypress', function(event) {
$(this).data('byKeyPress', 1);
});
$(this).on('click', function(event) {
$(this).data('byKeyPress', 0);
});
$(this).on('change', function(event) {
//if change was done by date picker click
if($(this).data('byKeyPress') != 1 && $(this).serialize() != $(this).data('serialized')) {
$("#eooMainForm").form('submit');
}
});
});因此，按键事件侦听器将"flag“"byKeyPress”设置为1，而单击事件侦听器将其设置为0。这样，我就可以在change事件侦听器中确定是什么导致了更改。唯一不起作用的情况是，用户开始键入日期，但随后通过单击日期选择器进行选择。我可以接受这个事实。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51792468
复制相关文章
相似问题