在文本输入框中检测回车键

Question

我试图做一个函数，当在特定输入框中按下回车键时触发。我哪里错了吗？

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

有没有更好的方法，可以在按下.input1上的回车键时执行函数?

- jQuerybeast

Answer 1

$(".input1").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        // Do something
    }
});

// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.

- Joseph Silber

---

你在哪个浏览器上测试它？我认为旧版本的IE不会触发文档上的keyup事件（但不确定）。 - Joseph Silber

你的代码没有运行是因为你使用了 .is()，而需要使用 === 而不是 ==。请查看我的答案获取更多细节。 - wesbos

顺便提一下，如果您按下回车键提交表单，keyup事件将不会触发 - 输入框将失去焦点。在我的火狐浏览器中出现了这种情况。 - commonpike

我建议使用$('.input1').on('keyup', function (e) {});以获得更好的兼容性。 - Daniel Dewhurst

属性 which、code、charCode 和 keyCode 已经被弃用。请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent 并更新相关信息。 - Sasay

Answer 2

event.key === "Enter"

更近期且更简洁：使用 event.key。 不再使用任意的数字代码！

注意：旧属性（.keyCode 和 .which）已被弃用。

const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

现代风格，带有lambda和解构

node.addEventListener("keyup", ({key}) => {
    if (key === "Enter") {
        // Do work
    }
})

如果你必须使用jQuery：

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Docs

Supported Browsers

- Gibolt

---

感谢纯JavaScript版本的实现，不确定为什么其他版本都是用jQuery实现的。 - Captain Fantastic

因为OP在jQuery中展示了他的示例代码，而jQuery（以及JavaScript）被标记了。 - Tigerrrrr

Answer 3

$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

或者直接绑定到输入本身

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

要找出你需要的keyCode，使用网站http://keycode.info

- wesbos

---

谢谢。我学到了新东西。顺便说一下，我使用了很多次.is()，所以它不是逻辑上不起作用。另外，对于其他情况，我再次使用了两个==。 - jQuerybeast

不错，你应该始终使用 ===。 - wesbos

Answer 4

尝试使用以下代码来检测文本框中按下的 Enter 键。

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

- ShankarSangoli

Answer 5

我发现最好的方法是使用 keydown （keyup 对我来说效果不佳）。

注意：我还禁用了表单提交，因为通常当你想在按下回车键时执行某些操作时，唯一不想做的事情就是提交表单 :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

- Roy Shoa

---

event.keyCode已经被弃用，而event.which没有，因此使用后者更好。 - Alex

Answer 6

也许已经晚了回答这个问题。但是以下代码简单地防止了回车键。只需复制粘贴即可正常使用。

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

- Indra Kumar S

Answer 7

我为您提供的解决方案如下：

适用于我的解决方案是以下内容

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

- Jorge Santos Neill

Answer 8

我为自己找到的解决方案是这样的：

一个解决方案，适用于我：

<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">

- Ian

Answer 9

尝试以下代码来检测文本框中是否按下了回车键。

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO

- jonathan klevin

Answer 10

 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

- Jobelle