Événement JQuery pour l'utilisateur qui appuie sur Entrée dans une zone de texte?

250

Y a-t-il un événement dans Jquery qui ne se déclenche que si l'utilisateur appuie sur le bouton Entrée dans une zone de texte? Ou tout plugin qui peut être ajouté pour l'inclure? Sinon, comment pourrais-je écrire un plugin rapide qui ferait cela?

javascript jquery jquery-events Cliquez Upvote
la source

Réponses:

446

Vous pouvez câbler votre propre événement personnalisé 

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

Jishnu AP
la source
11
Il convient de noter que dans un scénario de détection de saisie pour empêcher la soumission du formulaire, l'événement "keyup" n'est pas optimal car le formulaire détecte la soumission lors de la frappe. Ainsi, "keydown" ou "keypress" pourrait être mieux dans ce cas.
TechNyquist
7
Remarque, bind () est déconseillé dans jQuery 3.0.
Bart Friederichs
Différents navigateurs ont différents e.keyCodepour certaines touches, mieux à utiliser e.which, cela garantira que vous gérerez le même bouton sur chaque navigateur
Oleg Shakhov
99 
   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });
Etienne Dupuis
la source
8
Merci - Cette solution correspondait à mon cas d'utilisation. Cependant, il convient de noter qu'une fois le traitement terminé, vous souhaiterez peut-être ajouter `$ (this) .removeAttr (" disabled ");` pour réactiver la zone de texte.
misterjaytee
39

Voici un plugin pour vous: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})
Naftali aka Neal
la source
Agréable. Beaucoup plus simple que cette URL que j'ai publiée. Je me demande à quoi sert l'article que j'ai posté et pourquoi il faut autant de code ..
CaptSaltyJack
1
Trop tard, j'ai déjà écrit le mien: P. Il fait également le même travail en moins de lignes .. également, l'utilisation de la $variable pour le plugin n'est pas une bonne idée car elle peut provoquer des conflits.
Cliquez sur Upvote le
@Neal, savez-vous comment le code du plugin que j'ai posté dans la réponse acceptée devrait être changé, afin que l'on puisse le faire $("#myInput").bind('click, onEnter', myCallback);et que cela fonctionne sans avoir besoin d'autre chose?
Cliquez sur Upvote
1
@ClickUpvote # 1: supprimez-le de la réponse - alors nous pourrons parler.
Naftali aka Neal
@Neal Amazing solution man. Je viens de copier cette fonction! Merci!
Bilal Fazlani
17

voici un plugin jquery pour le faire

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

pour l'utiliser, incluez le code et configurez-le comme ceci:

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

jsfiddle ici http://jsfiddle.net/VrwgP/30/

jzilla
la source
2
Bien, j'appellerais le rappel en utilisant func.apply(this), de cette façon, dans la fonction de rappel, vous pouvez utiliser thisnormalement pour accéder à l'élément sur lequel l'événement a été déclenché.
Cliquez sur Upvote
oui, bon point sur func.apply (ceci), n'avait même pas considéré cela.
jzilla
Agréable et concis, mais j'ajouterais que l'arrêt de la propagation et des valeurs par défaut serait une bonne idée dans la plupart des cas, pour empêcher toute soumission de formulaire. Ajoutez simplement l' e.preventDefault(); e.stopPropagation();intérieur du if (e.keyCode)bit.
Irongaze.com
8

Il convient de noter que l'utilisation de live()dans jQuery est déconseillée depuis la version 1.7et a été supprimée dans jQuery 1.9. Au lieu de cela, l'utilisation de on()est recommandée.

Je suggérerais fortement la méthodologie suivante pour la liaison, car elle résout les défis potentiels suivants:

  1. En liant l'événement sur document.bodyet en passant $ selector comme deuxième argument on(), les éléments peuvent être attachés, détachés, ajoutés ou supprimés du DOM sans avoir à gérer les événements de nouvelle liaison ou de double liaison. En effet, l'événement est attaché à document.bodyplutôt que $selectordirectement, ce qui signifie qu'il $selectorpeut être ajouté, supprimé et ajouté à nouveau et ne chargera jamais l'événement qui lui est lié.
  2. En appelant off()avant on(), ce script peut vivre soit dans le corps principal de la page, soit dans le corps d'un appel AJAX, sans avoir à vous soucier d'événements double-liaison accidentels.
  3. En encapsulant le script à l'intérieur $(function() {...}), ce script peut à nouveau être chargé soit par le corps principal de la page, soit dans le corps d'un appel AJAX. $(document).ready()n'est pas renvoyé pour les requêtes AJAX, alors qu'il le $(function() {...})fait.

Voici un exemple:

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>
Joshua Burns
la source
4

Si votre entrée est search, vous pouvez également utiliser l' on 'search'événement. Exemple

<input type="search" placeholder="Search" id="searchTextBox">

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
Phan Van Linh
la source
3

Code HTML:-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

Code de script Java

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

Votre formulaire n'a pas de bouton d'envoi par défaut

yogesh lodha
la source
2

Une autre variation subtile. J'ai opté pour une légère séparation des pouvoirs, j'ai donc un plugin pour activer la capture de la touche entrée, puis je me lie simplement aux événements normalement:

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

Et puis en cours d'utilisation:

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

Cette variante vous permet d'utiliser la délégation d'événements (pour vous lier à des éléments que vous n'avez pas encore créés).

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
Wilco
la source
0

Je n'ai pas pu keypressdéclencher l' événement pour le bouton Entrée, et je me suis gratté la tête pendant un certain temps, jusqu'à ce que je lise les documents jQuery:

" L'événement keypress est envoyé à un élément lorsque le navigateur enregistre la saisie au clavier. Il est similaire à l'événement keydown, sauf que le modificateur et les touches non imprimantes telles que Shift, Esc et suppriment les événements keydown de déclenchement mais pas les événements keypress. " ( https://api.jquery.com/keypress/ )

J'ai dû utiliser l' événement keyupou keydownpour attraper une pression sur le bouton Entrée.

Arne M
la source