将文本框绑定到“输入”键答案

【问题标题】：Bind textbox to 'enter' key将文本框绑定到“输入”键
【发布时间】：2011-05-10 00:35:14
【问题描述】：

我需要将键盘上的“输入”键绑定到特定的 javascript 方法，但仅当某个文本字段处于焦点时。

<input id="post" type="text" style="width:400px;"/>

我该怎么做？

我知道您可以使用具有提交操作的表单和内容来执行此操作，但是当上面的 input 字段处于焦点时，我可以将“输入”键绑定到特定功能吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$("#post").focus(function() {
    $(this).data("hasfocus", true);
});

$("#post").blur(function() {
    $(this).data("hasfocus", false);
});

$(document.body).keyup(function(ev) {
    // 13 is ENTER
    if (ev.which === 13 && $("#post").data("hasfocus")) {
        ...
    }
});

我建议您直接在 $("#post") 输入上绑定 ENTER 按键事件，而不是在整个页面上监听该事件。

【讨论】：

如果您使用函数来执行其他操作，例如我记得在函数调用之前抛出 e.preventDefault(); 以防止提交表单。
您建议仅在#post 上绑定它，然后编写代码来收听整个文档？我什至不...

【解决方案2】：

只需将 onkeyup 事件绑定到相关输入即可。您根本不必担心检查焦点，因为根据定义，输入只有在获得焦点时才会接收 keyup 事件。

我认为 JQuery 没问题，因为您在问题中包含了标签，所以在您的文档就绪处理程序中执行以下操作：

$("#IDforyourcontrol").keyup(function(ev) {
   // 13 is ENTER
   if (ev.which === 13 && /*whatever other conditions you care about*/) {
      // do something
   }
});

【讨论】：

“根据定义，输入只有在获得焦点时才会接收 keyup 事件”严格来说并不正确。事件也可以通过编程方式分派，因此输入可以在未获得焦点时接收 keyup 事件（对于其他元素上的许多事件，也需要考虑冒泡和捕获阶段）。但是，向输入添加 keyup 侦听器应该足以满足 OP 的要求。
好的，当然，我没有考虑过以编程方式触发的事件，尽管似乎不太可能有人希望以编程方式触发 enter 键的按键并将其与用户操作区分开来。尽管如此，我认为我的主要观点是有效的，为此您通常不需要担心检查焦点在哪里。 Raynos 的回答也解释了如何允许焦点，所以我想它更完整地回答了 OP，尽管我不会将事件绑定到 document.body （但我从来不需要检查那种类型的焦点）。
很好的答案，隐含的，高效的。我在输入本身上使用它<input onkeyup="myFunction()" /> 然后myFunction(e) {if (e.which === 13....}