如何在文本框中获取回车键以触发一个函数而不是默认按钮？

Question

我正在尝试实现在特定文本框内按下 Enter 键触发一个函数，而不是默认的第一个按钮。你可以在这里看到发生了什么：http://jsfiddle.net/cutsomeat/WZ6TM/1/。

如果你按其他键，你将会得到一个带有该按键编码的警告框，但是如果你按 Enter 键，你将不会得到该按键编码的警告框，相反，你会得到按钮点击事件中的警告框。

显然，按下 Enter 键会触发按钮。是否有一种方法可以避免这种情况，而是在 keyup 事件中捕获 Enter 键，然后触发另一个函数呢？

- MarkieB

Answer 1

试试这个：

$('#myText').on("keypress", function(e) {
        if (e.keyCode == 13) {
            alert("Enter pressed");
            return false; // prevent the button click from happening
        }
});

演示

- sachleen

---

.live()已经被废弃。请改用.on()代替。 - Arvind Bhardwaj

最好使用bind()而不是on()或者更糟的是live()。 - giammin

使用 on()。bind() 现已弃用。 - Gavin

Answer 2

使用.on()代替已被弃用的.live()方法。

$(document).on("keypress", ".myText", function(e) {
     if (e.which == 13) {
         //do some stuff
     }
});

- Arvind Bhardwaj

Answer 3

在 keyDown 中执行 e.preventDefault() 以避免按钮默认操作：

$('#myText').keydown(function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
    }
    alert(e.keyCode);
});

- Suraj Chandran

---

只需要将 if (e.keyCode = 13) 改为 if (e.keyCode == 13) 即可。 - Filipe Tagliacozzi

Answer 4

$(document).ready(function() {

    $('#myText').keypress(function(e) {
        if ( e.keyCode == 13 ) {  // detect the enter key
            $('#myButton').click(); // fire a sample click,  you can do anything
        }
    });

    $('#myButton').click(function(e) {
        alert('Button click activated!');
    });

});

演示

对于动态元素，请像下面这样使用.on()：

$(document).ready(function() {

    $(document).on('keypress', '#myText', function(e) {

        if ( e.keyCode == 13 ) {  // detect the enter key
            $('#myButton').click(); // fire a sample click,  you can do anything
        }
    });

    $(document).on('click', '#myButton', function(e) {
        alert('Button click activated!');
    });

});

- thecodeparadox

---

我本想点赞这个观点，但你真的应该解释一下为什么 keyup 比 keydown/keypress 更好。 - Oliver