0

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

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

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

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

我的一些代码。特别case 13是switch语句。仅当外部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;
    }

谢谢，詹姆斯

4

2 回答 2

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>

于 2015-06-08T16:31:46.643 回答
0

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

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

于 2015-06-08T16:30:28.643 回答