jQuery的事件.如果HTML中有必需的字段，则跳过Enter(13)的keyCode

Question

我在我的表单中的几个字段中使用required="yes"属性。我有一个搜索框内的形式，以自动填充下拉列表，如果他们正在寻找的项目还没有在那里。在我的jQuery中，我观察了字段的keyup事件。$("input#search-input-text").keyup(function(event){}。在我做任何其他事情之前，我马上使用event.preventDefault();。

我注意的一件事是回车键。当按下时，我检查当前是否选中了某个搜索结果。如果是，我将结果插入到页面上的下拉列表中。但如果不是，我就让表单被提交。

问题是，当我使用属性需要表单字段时，它会忽略我的jQuery并在jQuery运行之前取消操作，并告诉我该字段是必需的。我在没有使用属性的必填字段的表单上使用此代码很好。如何在内置浏览器功能因必需的字段而阻止我之前捕获Enter键?

请注意，我不能使用keydown代替。另外，即使我这样做了，即使我返回false(尽管这很明显)，我仍然会得到关于必填字段的警告。我想在浏览器之前捕获keyup，并在某些情况下完全停止它。

---

我的一些代码。具体来说，switch语句的case 13。只有当外部if语句为false时，表单才应该提交。

$("input#search-input-text").keyup(function(event){
    event.preventDefault();
    var _search_action = $("input#search-action").val();
    var _search_term = $("input#search-input-text").val();
    var dosearch = true;
    switch (event.keyCode) {
        case 13:
            dosearch = false;
            if ($("#drop-search-search-results").find("li.selected").text()){
                if ($('#search-drop-down').val()) {
                    $('#' + $('#search-drop-down').val()).append('<option value="' + $("#drop-search-search-results").find("li.selected").attr('id') + '">' + $("#drop-search-search-results").find("li.selected").text() + '</option>');
                    $('#' + $('#search-drop-down').val()).val($("#drop-search-search-results").find("li.selected").attr('id'));
                    $('.textbox-drop-search').hide();
                    $('.search-default-selection').show();
                    $("input#search-input-text").val('');
                }else{
                    $("input#search-input-text").val($("#drop-search-search-results").find("li.selected").text());
                }
                $("#drop-search-search-results").hide().html("");
                return false;
            }else{
                $("form.drop-search").submit();
                return true;
            }
            //alert('enter');
            break;
        case 37:
            dosearch = false;
            //alert('left');
            break;
        case 38:
            dosearch = false;
            moveUp();
            //alert('up');
            break;
        case 39:
            dosearch = false;
            //alert('right');
            break;
        case 40:
            dosearch = false;
            moveDown();
            //alert('down');
            break;
    }

谢谢,詹姆斯。

Answer 1

您可以在那里使用invalid event和preventDefault。Keyup仍然可以工作。参见代码片段示例:

$('input').on('invalid', function(e){
    e.preventDefault(); 
    
});
$('input').on('keypress', function(e){
    if(e.keyCode == '13'){
      
    e.target.value = "input";
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" action="">
    Required input: <input type="text" name="usrname" required/>
    <input type="submit" />
</form>

Answer 2

嗯，我最终搜索了更多，发现要让浏览器不验证表单，我必须向表单标记添加属性novalidate。因此，我所做的是在开始搜索序列时添加属性，然后在完成后删除它。这解决了我的问题。

为了清晰起见，我根据需要使用了$('form.form-class').attr('novalidate', true);和$('form.form-class').removeAttr('novalidate');。