Question

我使用本地HTML日期选择器。我想实现在由日期选择器浏览器提供的日期选择日期时提交父表单的功能。如果日期是通过键盘输入的，那么我只想在按下Enter键或对焦时提交。

现在我的问题是，至少在Firefox中，我无法区分日期选择器输入和键盘输入。一些例子：

$(this).on('input', function(event) {
    console.log(event.type);
}

无论我做什么，这总是记录“输入”-我希望它是“单击”或“按键”之类的。

on（'click'）处理函数仅在我单击输入字段时触发，而不是在我单击日期选择器中的内容时触发...

有人可以把我推向正确的方向吗？

非常感谢菲利普

Answer 1

您需要附加一个支持两种事件类型的事件。使用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;
    }
}

Answer 2

您可以在此图像中找到所有事件列表。

$('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。上面的示例在blur event上应用了input。

Answer 3

我做了一个变通方法，与我想要的很接近：

 $('#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');
                }
            });
    });

因此，按键事件侦听器将“标志”“ byKeyPress”设置为1，而单击事件侦听器将其设置为零。这样，我可以在更改事件侦听器中确定导致更改的原因。唯一不起作用的情况是用户开始输入日期，然后通过单击日期选择器选择日期。我可以忍受。

<input type =“ date” />事件侦听器：如何区分鼠标选择与键盘输入

3 个答案: