CODEWITHSUNDEEP
jquerybuttontextboxkeycodeenter
MarkieB
MarkieB

Reputation: 557

How to get the Enter key within a textbox to trigger a function and not the first/default button

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.

You can see an example of what is happening here: 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.

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?

Upvotes: 45

Views: 101013

Answers (4)

sachleen
sachleen

Reputation: 31131

Try this:

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

Demo

Upvotes: 98

thecodeparadox
thecodeparadox

Reputation: 87073

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

For live elements use .on() like below:

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

});

Upvotes: 12

Suraj Chandran
Suraj Chandran

Reputation: 24791

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

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

Upvotes: 21

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

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

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

Upvotes: 50

Related Questions