jQuery event.keyCode 如果 HTML 中有必填字段，则跳过 Enter (13)

Question

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

我关注的其中一件事是 Enter 按钮。按下时，我会检查当前是否选择了其中一个搜索结果。如果是，我将结果插入页面的下拉列表中。但如果不是，我让表单提交。

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

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

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

$("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

好吧，我最终搜索了更多，发现要让浏览器不验证表单，我必须将属性 novalidate 添加到表单标签。所以我所做的是在开始搜索序列时添加属性，然后在完成后将其删除。这解决了我的问题。

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

Answer 2

您可以在那里使用 invalid 事件和 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>

jQuery event.keyCode 如果 HTML 中有必填字段，则跳过 Enter (13)

jQuery event.keyCode for Enter (13) is skipped if there are required fields in the HTML

jquery

keyup

required-field