输入键表单提交失败,HTML5日期输入

Enter key form submission fails with HTML5 date input

本文关键字:输入 HTML5 日期 失败 表单提交      更新时间:2023-09-26

我有一个小HTML表单(下面的代码),它实际上分为两部分,我希望用户能够通过只在其中一部分按回车键来提交表单(下面代码中的"input";显示属性由连接到表单第二部分中的选择的一点javascript切换)。目前,我正在用一点jQuery/javascript(也在下面)来处理这个问题,以将回车键绑定到表单提交。

HTML:

<form id="form">
    <span id="input">
        <span id="text" style="display:inline">
            <input type="text">
        </span>
        <span id="dates" style="display:none">
            <input type="date" id="start">
            <input type="date" id="end">
        </span>
    </span>
    <select onchange="changeInput(this.options[selectedIndex].value)">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
    </select>
</form>

以及jQuery/javascript:

$(function(){
    $("#input").on("click", function(e){
        if(e.which == 13){
            $("#form").submit();
        }
    });
});

当显示文本输入时,这就可以正常工作。但是,当显示日期输入时,回车键不起任何作用。无论浏览器是否显示本机日历小部件,或者在不支持日期输入类型(由另一个jQuery/javascript处理)的浏览器中,输入是否被jQueryUI日期选择器小部件替换,都会出现这种情况。

知道为什么会发生这种事吗?我知道我可以通过添加一个隐藏的提交按钮并覆盖表单第二部分的回车键行为来绕过它,但我想先了解发生了什么。

对于click事件,e.which可以是1、2或3(来自jQuery文档)。

因此,例如,对于鼠标左键单击,它应该是:

if (e.which == 1)