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

时间:2014-09-03 11:03:06

标签: javascript jquery html5 forms

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

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

显示文本输入时,这很好用。但是,当显示日期输入时,回车键不执行任何操作。无论浏览器是显示本机日历小部件,还是在不支持日期输入类型的浏览器中由jQueryUI datepicker小部件替换输入(由另一个jQuery / javascript处理),都是这种情况。

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

1 个答案:

答案 0 :(得分:0)

click事件e.which可以是1,2或3(来自jQuery docs)。

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

if (e.which == 1)