JQuery-Ereignis für Benutzer, die die Eingabetaste in einem Textfeld drücken?

250

Gibt es ein Ereignis in Jquery, das nur ausgelöst wird, wenn der Benutzer die Eingabetaste in einem Textfeld drückt? Oder ein Plugin, das hinzugefügt werden kann, um dies einzuschließen? Wenn nicht, wie würde ich ein schnelles Plugin schreiben, das dies tun würde?

javascript jquery jquery-events Klicken Sie auf Upvote
quelle

Antworten:

446

Sie können Ihr eigenes benutzerdefiniertes Ereignis verkabeln 

$('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
quelle
11
Es ist anzumerken, dass in einem Szenario der Eingabeerkennung, um das Senden von Formularen zu verhindern, das "keyup" -Ereignis nicht optimal ist, da das Formular das Senden beim Keydown erkennt. Daher ist "Tastendruck" oder "Tastendruck" in diesem Fall möglicherweise besser.
TechNyquist
7
Beachten Sie, dass bind () in jQuery 3.0 veraltet ist.
Bart Friederichs
Verschiedene Browser haben unterschiedliche e.keyCodeTasten für einige Schlüssel, die besser zu verwenden e.whichsind. Dies garantiert, dass Sie in jedem Browser dieselbe Schaltfläche verwenden
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
quelle
8
Danke - Diese Lösung passte zu meinem Anwendungsfall. Beachten Sie jedoch, dass Sie nach Abschluss der Verarbeitung möglicherweise "$ (this) .removeAttr (" disabled ");" hinzufügen möchten, um das Textfeld wieder zu aktivieren.
Misterjaytee
39

Hier ist ein Plugin für dich: (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 alias Neal
quelle
Nett. Viel einfacher als die URL, die ich gepostet habe. Ich frage mich, worum es in dem Artikel, den ich gepostet habe, geht und warum so viel Code benötigt wird.
CaptSaltyJack
1
Zu spät habe ich schon mein eigenes geschrieben: P. Es erledigt den gleichen Job auch in weniger Zeilen. Außerdem ist die Verwendung der $Variablen für das Plugin keine gute Idee, da dies zu Konflikten führen kann.
Klicken Sie auf Upvote
@Neal, weißt du, wie der Code des Plugins, das ich in der akzeptierten Antwort gepostet habe, geändert werden müsste, damit man es tun kann $("#myInput").bind('click, onEnter', myCallback);und es funktioniert, ohne dass etwas anderes benötigt wird?
Klicken Sie auf Upvote
1
@ClickUpvote # 1: entferne es aus der Antwort - dann können wir reden.
Naftali aka Neal
@Neal Erstaunliche Lösung Mann. Ich hatte gerade diese Funktion kopieren! Vielen Dank!
Bilal Fazlani
17

Hier ist ein JQuery-Plugin, um das zu tun

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

Um es zu verwenden, fügen Sie den Code hinzu und richten Sie ihn folgendermaßen ein:

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

jsfiddle davon hier http://jsfiddle.net/VrwgP/30/

jzilla
quelle
2
Schön, ich würde den Rückruf mit auf func.apply(this)diese Weise aufrufen . Auf diese Weise können Sie innerhalb der Rückruffunktion thiswie gewohnt auf das Element zugreifen, für das das Ereignis ausgelöst wurde.
Klicken Sie auf Upvote
Ja, ein guter Punkt über func.apply (dies), hatte das nicht einmal in Betracht gezogen.
Jzilla
Schön und prägnant, aber ich möchte hinzufügen, dass es in den meisten Fällen eine gute Idee wäre, die Weitergabe und die Standardeinstellungen zu stoppen, um das Senden von Formularen zu verhindern. Fügen Sie einfach e.preventDefault(); e.stopPropagation();das if (e.keyCode)Bit hinzu.
Irongaze.com
8

Es ist zu beachten, dass die Verwendung von live()in jQuery seit der Version veraltet ist 1.7und in jQuery entfernt wurde 1.9. Stattdessen wird die Verwendung von on()empfohlen.

Ich würde die folgende Bindungsmethode dringend empfehlen, da sie die folgenden potenziellen Herausforderungen löst:

  1. Durch Binden des Ereignisses an document.bodyund Übergeben von $ selector als zweites Argument an on()können Elemente angehängt, getrennt, hinzugefügt oder aus dem DOM entfernt werden, ohne dass erneut bindende oder doppelt bindende Ereignisse behandelt werden müssen. Dies liegt daran, dass das Ereignis document.bodynicht $selectordirekt, sondern angehängt ist. Dies bedeutet, $selectordass es hinzugefügt, entfernt und erneut hinzugefügt werden kann und das daran gebundene Ereignis niemals geladen wird.
  2. Durch den Aufruf off()vor on(), kann dieses Skript lebt entweder innerhalb innerhalb des Hauptkörpers der Seite oder im Körper eines AJAX - Aufruf, ohne sich um versehentlich doppelt Bindungsereignisse zu kümmern.
  3. Durch das Umschließen des Skripts $(function() {...})kann dieses Skript erneut entweder vom Hauptteil der Seite oder vom Hauptteil eines AJAX-Aufrufs geladen werden. $(document).ready()wird nicht für AJAX-Anfragen ausgelöst, während dies der $(function() {...})Fall ist.

Hier ist ein Beispiel:

<!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
quelle
4

Wenn Ihre Eingabe ist search, können Sie auch on 'search'event verwenden. Beispiel

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

.

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

HTML Quelltext:-

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

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

Java Script Code

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;
    }

Ihr Formular verfügt nicht über die Standard-Senden-Schaltfläche

Yogesh Lodha
quelle
2

Eine weitere subtile Variation. Ich habe mich für eine leichte Gewaltenteilung entschieden, daher habe ich ein Plugin, mit dem ich die Eingabetaste abfangen kann. Dann binde ich mich normalerweise an Ereignisse:

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

Und dann im Einsatz:

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

Mit dieser Variante können Sie die Ereignisdelegierung verwenden (um an Elemente zu binden, die Sie noch nicht erstellt haben).

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

Ich konnte das keypressEreignis nicht für die Eingabetaste auslösen und kratzte mir einige Zeit am Kopf, bis ich die jQuery-Dokumente gelesen hatte:

" Das Tastendruckereignis wird an ein Element gesendet, wenn der Browser Tastatureingaben registriert. Dies ähnelt dem Keydown-Ereignis, außer dass Modifikator- und nicht druckbare Tasten wie Shift, Esc und Delete Keydown-Ereignisse auslösen, jedoch keine Tastendruckereignisse. " ( https://api.jquery.com/keypress/ )

Ich musste das Ereignis keyupoder verwenden keydown, um einen Druck auf die Eingabetaste zu erhalten.

Arne M.
quelle