Question

我在页面上有几个html input控件和一个搜索按钮。当用户在输入控件之外时（即焦点不在输入控件内），如果用户按回车键，我想触发搜索按钮的点击事件。搜索按钮不是Submit按钮，不在form

内

<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />

<button type="button" id="btnSearch">Search</button>

目前我在做这个

$(document).keypress(function (event) {
    if (event.keyCode === 13) {
        $("#btnSearch").click();
    }
})

但是，上述代码会在用户单击enter时触发click事件。

我的一些输入控件是自定义自动完成控件。用户开始输入内容后，自动完成控制会显示多个选项。然后，用户可以使用鼠标或按Enter键选择该选项。

当用户按Enter键选择选项时，我不想触发搜索按钮的click事件。

Answer 1

只需确保自动完成元素不是输入的来源。从您在问题中提供的演示中，这将有效。但是，如果您的用例略有不同，您可能需要调整类名称或选择器以确保它阻止正确的目标元素

＆＃13;

$(document).keypress(function (event) {
       if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) {
           $("#btnSearch").click();
           alert('btnSearchClick');
       }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />

<button type="button" id="btnSearch">Search</button>

＆＃13;

或者，由于事件传播出来，如果您可以阻止自动完成事件在您使用的任何库中传播，那么这也可能有效。

按输入控件外输入键时如何触发按钮单击

1 个答案: