Zdarzenie JQuery dla użytkownika naciskając enter w polu tekstowym?

250

Czy w Jquery jest jakieś zdarzenie, które jest uruchamiane tylko wtedy, gdy użytkownik naciśnie przycisk Enter w polu tekstowym? Lub jakaś wtyczka, którą można dodać, aby to uwzględnić? Jeśli nie, jak napisałbym szybką wtyczkę, która by to zrobiła?

javascript jquery jquery-events Kliknij opcję Upvote
źródło

Odpowiedzi:

446

Możesz połączyć własne niestandardowe wydarzenie 

$('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
źródło
11
Warto zauważyć, że w scenariuszu wykrywania wejścia, aby zapobiec przesłaniu formularza, zdarzenie „keyup” nie jest optymalne, ponieważ formularz wykrywa przesłanie przy keydown. W związku z tym „keydown” lub „keypress” może być lepsze w takim przypadku.
TechNyquist
7
Uwaga, bind () jest przestarzałe w jQuery 3.0.
Bart Friederichs,
Różne przeglądarki mają różne e.keyCodedla niektórych kluczy, lepiej używaće.which , to zagwarantuje, że będziesz obsługiwać ten sam przycisk w każdej przeglądarce
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
źródło
8
Dzięki - To rozwiązanie pasuje do mojego przypadku użycia. Warto jednak zauważyć, że po zakończeniu przetwarzania możesz dodać `$ (this) .removeAttr (" disabled ");`, aby ponownie włączyć pole tekstowe.
misterjaytee
39

Oto wtyczka dla Ciebie: (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
źródło
Miły. Znacznie prostsze niż ten URL, który opublikowałem. Zastanawiam się, na czym polega cholernie opublikowany artykuł i dlaczego wymaga tak dużo kodu ..
CaptSaltyJack
1
Za późno napisałem już własny: P. Wykonuje to samo zadanie w mniejszej liczbie wierszy .. również użycie $zmiennej dla wtyczki nie jest dobrym pomysłem, ponieważ może powodować konflikty.
Kliknij Upvote
@Neal, czy wiesz, w jaki sposób kod wtyczki, którą zamieściłem w zaakceptowanej odpowiedzi, musiałby zostać zmieniony, aby można było to zrobić $("#myInput").bind('click, onEnter', myCallback);i działało bez potrzeby niczego innego?
Kliknij Upvote
1
@ClickUpvote # 1: usuń go z odpowiedzi - wtedy możemy porozmawiać.
Naftali alias Neal
@Neal Niesamowite rozwiązanie człowiek. Właśnie miałem kopię tej funkcji! dzięki!
Bilal Fazlani
17

Oto wtyczka jquery, aby to zrobić

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

aby go użyć, dołącz kod i skonfiguruj go w następujący sposób:

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

jsfiddle z tego tutaj http://jsfiddle.net/VrwgP/30/

jzilla
źródło
2
Fajnie, wywołałbym funkcję oddzwaniania func.apply(this), w ten sposób wewnątrz funkcji wywołania zwrotnego można thisnormalnie użyć, aby uzyskać dostęp do elementu, w którym wywołano zdarzenie.
Kliknij Upvote
tak, dobra uwaga na temat func.apply (this), nawet tego nie rozważała.
jzilla
Ładne i zwięzłe, ale dodam, że zatrzymanie propagacji i domyślnych ustawień byłoby dobrym pomysłem w większości przypadków, aby zapobiec przesłaniu formularza. Wystarczy dodać e.preventDefault(); e.stopPropagation();wewnątrz if (e.keyCode)kawałka.
Irongaze.com,
8

Należy zauważyć, że użycie live()jQuery jest przestarzałe od wersji 1.7i zostało usunięte w jQuery 1.9. Zamiast tego on()zalecane jest użycie.

Zdecydowanie zasugerowałbym następującą metodologię wiązania, ponieważ rozwiązuje ona następujące potencjalne wyzwania:

  1. Przez powiązanie zdarzenia z document.bodyi przekazanie selektora $ jako drugiego argumentu on()elementy mogą być dołączane, odłączane, dodawane lub usuwane z DOM bez konieczności radzenia sobie ze zdarzeniami ponownego wiązania lub podwójnego wiązania. Wynika to z faktu, że zdarzenie jest dołączone document.bodyraczej niż $selectorbezpośrednio, co oznacza$selector można je dodawać, usuwać i dodawać ponownie i nigdy nie załaduje zdarzenia związanego z nim.
  2. Dzwoniąc off()wcześniej on(), ten skrypt może żyć w obrębie głównej strony strony lub w treści wywołania AJAX, bez konieczności martwienia się o przypadkowe podwójne powiązanie zdarzeń.
  3. Po zawinięciu skryptu skrypt $(function() {...})ten może zostać ponownie załadowany przez główną treść strony lub w treści wywołania AJAX. $(document).ready()nie zostaje zwolniony dla żądań AJAX, a jednocześnie $(function() {...}).

Oto przykład:

<!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
źródło
4

Jeśli twoje dane wejściowe są search, możesz również użyć on 'search'zdarzenia. Przykład

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

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
Phan Van Linh
źródło
3

Kod HTML:-

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

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

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

Twój formularz nie ma domyślnego przycisku przesyłania

Yogesh Lodha
źródło
2

Kolejna subtelna odmiana. Poszedłem do lekkiego rozdzielenia mocy, więc mam wtyczkę, aby umożliwić złapanie klawisza Enter, a następnie po prostu łączę się ze zdarzeniami normalnie:

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

A następnie w użyciu:

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

Ta odmiana umożliwia użycie delegowania zdarzeń (w celu powiązania z elementami, które nie zostały jeszcze utworzone).

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
Wilco
źródło
0

Nie mogłem zmusić keypresszdarzenia do uruchomienia przycisku Enter i podrapałem się po głowie, dopóki nie przeczytałem dokumentów jQuery:

„ Zdarzenie naciśnięcia klawisza jest wysyłane do elementu, gdy przeglądarka rejestruje dane z klawiatury. Jest to podobne do zdarzenia skrótu klawiaturowego, z wyjątkiem tego, że modyfikator i klawisze niedrukowalne, takie jak Shift, Esc i usuwanie zdarzeń skrótu wyzwalacza, ale nie zdarzenia naciśnięcia klawisza. ” ( https://api.jquery.com/keypress/ )

Musiałem użyć zdarzenia keyuplub keydown, aby złapać naciśnięcie przycisku Enter.

Arne M.
źródło