web-dev-qa-db-fra.com

JQuery Event pour l'utilisateur en appuyant sur entrer dans une zone de texte?

Un événement dans Jquery est-il déclenché uniquement si l'utilisateur appuie sur le bouton Entrée dans une zone de texte? Ou tout plugin qui peut être ajouté pour inclure cela? Si non, comment pourrais-je écrire un plugin rapide qui ferait cela?

javascriptjavascript-eventsjquery
225
Click Upvote

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/

417
Jishnu A P
   $('#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");
         }
   });
80
Etienne Dupuis

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')})
37
Neal

heres 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 de celui-ci ici http://jsfiddle.net/VrwgP/30/

15
jzilla

Il devrait être bien noté que l’utilisation de live() dans jQuery est obsolète depuis la version 1.7 et 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éthode de liaison suivante, car elle résout les problèmes potentiels suivants:

  1. En liant l'événement à document.body et en passant $ selector comme second 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 ré-association ou de double liaison. En effet, l'événement est associé à document.body plutôt qu'à $selector directement, ce qui signifie que $selector peut ê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 résider dans le corps principal de la page ou dans le corps d'un appel AJAX, sans avoir à s'inquiéter des événements de double liaison accidentels.
  3. En enveloppant le script dans $(function() {...}), ce script peut à nouveau être chargé par le corps principal de la page ou dans le corps d'un appel AJAX. $(document).ready() ne se déclenche pas pour les demandes AJAX, contrairement à $(function() {...}).

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>
7
Joshua Burns

Code HTML:- 

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

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

Code Javascript 

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

1
yogesh lodha

Je ne pouvais pas que l'événement keypress se déclenche pour le bouton d'entrée et me gratte la tête quelques temps, jusqu'à ce que je lise la documentation jQuery:

"L'événement de frappe est envoyé à un élément lorsque le navigateur enregistre une entrée au clavier. Cet événement est similaire à l'événement de touches, sauf que les touches modificatrice et non imprimantes telles que Shift, Esc, et delete déclenchent des événements de touches sans les presser. événements. "( https://api.jquery.com/keypress/ )

Je devais utiliser l'événement keyup ou keydown pour appuyer sur le bouton d'entrée.

0
Arne M

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

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

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
0
Linh

Une autre variation subtile… .. J'ai opté pour une légère séparation des pouvoirs, j'ai donc un plugin pour permettre de capturer la touche Entrée, puis je me lie 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 usage:

$('.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 */ });
0
Wilco