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

时间:2022-07-07 19:43:37

I am trying to get the Enter key to trigger a function when it is pressed when inside a certain textbox, and not trigger the first or default button.

我试图让Enter键在某个文本框内按下时触发一个函数,而不是触发第一个或默认按钮。

You can see an example of what is happening here: http://jsfiddle.net/cutsomeat/WZ6TM/1/

你可以在这里看到一个例子:http://jsfiddle.net/cutsomeat/WZ6TM/1/

If you press other keys you will get an alert box with the keycode, yet if you press the Enter key you will not get the alert box with the keycode, but rather the alert box within the button click event.

如果按其他键,您将收到一个带有键码的警告框,但是如果您按下Enter键,您将无法获得带有键码的警告框,而是按钮点击事件中的警告框。

Obviously the Enter key is trigger the button. Is there a way to avoid this and instead, capture the Enter key in the keyup event, then trigger another function?

显然,Enter键是触发按钮。有没有办法避免这种情况,而是在keyup事件中捕获Enter键,然后触发另一个函数?

4 个解决方案

#1


69  

Try this:

尝试这个:

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

Demo

演示

#2


48  

Use .on() as .live() has been deprecated.

使用.on()作为.live()已被弃用。

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

#3


17  

Do e.preventDefault() in keyDown to avoid default action of button:

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

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

#4


10  

$(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!');
    });

});

DEMO

DEMO

For live elements use .on() like below:

对于实时元素,请使用.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!');
    });

});

#1


69  

Try this:

尝试这个:

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

Demo

演示

#2


48  

Use .on() as .live() has been deprecated.

使用.on()作为.live()已被弃用。

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

#3


17  

Do e.preventDefault() in keyDown to avoid default action of button:

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

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

#4


10  

$(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!');
    });

});

DEMO

DEMO

For live elements use .on() like below:

对于实时元素,请使用.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!');
    });

});