web-dev-qa-db-fra.com

Comment obtenir la touche Entrée dans une zone de texte pour déclencher une fonction et non le premier bouton / par défaut

J'essaie d'obtenir la touche Entrée pour déclencher une fonction lorsqu'elle est enfoncée dans une certaine zone de texte et ne pas déclencher le premier bouton ou le bouton par défaut.

Vous pouvez voir un exemple de ce qui se passe ici: http://jsfiddle.net/cutsomeat/WZ6TM/1/

Si vous appuyez sur d'autres touches, vous obtiendrez une boîte d'alerte avec le code clé, mais si vous appuyez sur la touche Entrée, vous n'obtiendrez pas la boîte d'alerte avec le code clé, mais plutôt la boîte d'alerte dans l'événement de clic de bouton.

Évidemment, la touche Entrée déclenche le bouton. Y a-t-il un moyen d'éviter cela et, à la place, de capturer la touche Entrée dans l'événement keyup, puis de déclencher une autre fonction?

39
MarkieB

Essaye ça:

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

Démo

85
sachleen

Utilisez .on() comme .live() a été obsolète .

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

Faites e.preventDefault() dans keyDown pour éviter l'action par défaut du bouton:

$('#myText').keydown(function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
    }
    alert(e.keyCode);
});
21
Suraj Chandran
$(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!');
    });

});

DÉMO

Pour les éléments vivants, utilisez .on() comme ci-dessous:

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

});
12
thecodeparadox