当在输入框之外按下回车键时如何触发按钮点击事件

Question

当在输入框之外按下回车键时如何触发按钮点击事件

4

我在页面上有几个html input控件和一个搜索按钮。当用户不在输入控件内（即焦点不在输入控件内）并且按下回车键时，我想触发搜索按钮的点击事件。搜索按钮不是一个提交按钮，并且它不在一个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键来选择选项。我不想在用户按回车键选择选项时触发搜索按钮的单击事件。

- LP13

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Travis J · Accepted Answer

确保自动完成元素不是按下回车键的源。从您在问题中提供的演示中，这将起作用。但是，如果您的使用情况略有不同，您可能需要调整类名或选择器以确保它正在阻止正确的目标元素。

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

<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>

另外，由于事件会向外传播，如果您可以防止使用的任何库中自动完成事件的传播，那么这也可能起作用。