输入密钥表单提交失败并输入 HTML5 日期答案

【问题标题】：Enter key form submission fails with HTML5 date input输入密钥表单提交失败并输入 HTML5 日期
【发布时间】：2014-10-27 20:33:30
【问题描述】：

我有一个小的 HTML 表单（下面的代码），它实际上分为两部分，我希望用户能够通过仅在其中一个部分中按 Enter 键来提交表单（下面代码中的“输入” ; 显示属性由连接到表单第二部分中的选择的一些 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 日期选择器小部件替换，都是这种情况。

知道为什么会这样吗？我知道我可以通过添加隐藏的提交按钮并覆盖表单第二部分的输入键行为来解决它，但我想先了解发生了什么。

【问题讨论】：

你能显示在浏览器中呈现的 html（如果不支持原生 html 5 日期，则有回退）？
@Regent - 抱歉，打错了。
@SSA - 我无法在帖子中添加图片，但我已经在这里放了一张 - link（如果这不起作用，请告诉我，我是 imgur 的新手...) 它按顺序显示显示的文本字段、显示的日期字段、本机日历小部件 (Chrome) 和 jQueryUI 日期选择器 (Firefox)。很抱歉缺少 CSS。
我的意思是，浏览器中用于上述表单/相关部分的 html 源代码。
@fminl 你为什么写e.which == 13？对于click 事件e.which 可以是1、2 或3（来自docs）。

标签： javascript jquery html forms

【解决方案1】：

对于click 事件e.which 可以是1、2 或3（来自jQuery docs）。

因此，例如，鼠标左键单击应该是：

if (e.which == 1)

【讨论】：

谢谢！我显然需要更好地检查我的代码，即使它来自比我更有经验的人。我很惊讶它与文本字段一起使用......