it-swarm.com.de

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

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

225
Click Upvote

Sie können Ihr eigenes individuelles Ereignis verbinden 

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

Hier ist ein Plugin für Sie: (Geige: 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

hier ist ein Jquery-Plugin

(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 ein und richten Sie ihn folgendermaßen ein:

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

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

15
jzilla

Es sollte gut beachtet werden , dass die Verwendung von live() in jQuery nicht mehr empfohlen wird seit Version 1.7 und remove in jQuery 1.9 wurde. Stattdessen wird die Verwendung von on() empfohlen.

Ich würde die folgende Methode für die Bindung dringend vorschlagen, da sie die folgenden potenziellen Herausforderungen löst:

  1. Durch die Bindung des Ereignisses an document.body und die Übergabe von $ selector als zweitem Argument an on() können Elemente angefügt, getrennt, hinzugefügt oder aus dem DOM entfernt werden, ohne dass erneute oder doppelte Bindungsereignisse verarbeitet werden müssen. Dies liegt daran, dass das Ereignis document.body und nicht $selector direkt angehängt ist. Dies bedeutet, dass $selector hinzugefügt, entfernt und erneut hinzugefügt werden kann und das an ihn gebundene Ereignis niemals lädt.
  2. Durch Aufruf von off() vor on() kann dieses Skript entweder im Hauptteil der Seite oder im Hauptteil eines AJAX - Aufrufs leben, ohne sich um versehentlich doppelte Bindungsereignisse kümmern zu müssen.
  3. Durch Umschließen des Skripts in $(function() {...}) kann dieses Skript entweder vom Haupttext der Seite oder innerhalb des Hauptteils eines Aufrufs von AJAX geladen werden. $(document).ready() wird nicht für AJAX - Anforderungen ausgelöst, während $(function() {...}) dies tut.

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

HTML Quelltext:-

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

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

Javascript 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 Schaltfläche "Standard"

1
yogesh lodha

Ich konnte das Ereignis keypress 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 Tastendruckereignis mit dem Unterschied, dass Modifizierer und nicht druckbare Tasten wie Umschalttaste, Esc und Löschtaste ausgelöst werden Tastendruckereignisse, jedoch keine Tastendruckereignisse. "( https://api.jquery.com/keypress/ )

Ich musste das Ereignis keyup oder keydown verwenden, um einen Druck auf die Eingabetaste abzufangen.

0
Arne M

Wenn Ihre Eingabe search ist, 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());
});
0
Linh

Eine weitere subtile Variante ... Ich habe eine leichte Trennung der Kräfte gewählt, also habe ich ein Plugin, um die Eingabetaste zu fangen, dann binde ich mich normal 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 in Gebrauch:

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

Diese Variante ermöglicht die Verwendung von Ereignisdelegation (zum Binden an Elemente, die Sie noch nicht erstellt haben).

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