Cum se detectează apăsarea tastaturii Enter pe tastatură folosind jQuery? (Programare, Javascript, Jquery, Evenimente De Tastatură, Introduceți, Evenimente Jquery)

chris a intrebat.

Aș dori să detectez dacă utilizatorul a apăsat Enter folosind jQuery.

Cum este posibil acest lucru? Este nevoie de un plugin?

EDIT: Se pare că trebuie să folosesc keypress() metoda.

Am vrut să știu dacă știe cineva dacă există probleme de browser cu această comandă – cum ar fi dacă există probleme de compatibilitate a browserului despre care ar trebui să știu?

Comentarii

  • link despre acest lucru .keypress() | Documentație API jQuery –  > Por Haim Evgi.
  • Unul dintre cele mai bune lucruri din cadrele Javascript este că acestea ar trebui să fie în mod implicit compatibile între browsere. Acestea se ocupă de verificările de compatibilitate a browserelor astfel încât utilizatorul să nu fie nevoit să o facă. Nu am citit codul sursă JQuery, dar mă îndoiesc că funcționalitatea de apăsare a tastelor este diferită în acest sens. –  > Por miek.
  • singura problemă de compatibilitate cu browserele este că ar trebui să folosiți e.which în loc de e.keyCode pentru a detecta codul ascii. –  > Por Daniel.
  • stackoverflow.com/questions/302122/… – –  > Por Lemo.
19 răspunsuri
Paolo Bergantino

Ideea lui jQuery este că nu trebuie să vă faceți griji cu privire la diferențele dintre browsere. Sunt destul de sigur că puteți merge în siguranță cu introduceți fiind 13 în toate browserele. Deci, având în vedere acest lucru, puteți face acest lucru:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Comentarii

  • Fac link către asta pentru că am citit asta și am plecat zgâriindu-mă pe cap de ce keypress nu a funcționat cu IE. (nu se va lega la $(window) în IE) quirksmode.org/dom/dom/events/keys.html –  > Por Incognito.
  • 17

  • e.keyCode nu este 100% cross browser. utilizați e.which în schimb, așa cum se arată mai jos –  > Por Daniel.
  • 15

  • Din documentația jQuery „Proprietatea event.which normalizează event.keyCode și event.charCode. Se recomandă să urmăriți event.which pentru introducerea tastelor de la tastatură.” –  > Por Riccardo Galli.
  • 21

  • $(document).on(‘keypress’, function(e) { –  > Por user956584.
  • Primesc mai multe execuții ale funcției date din cauza propagării evenimentelor (adică, alerta este lansată de două ori). Pentru a opri acest lucru, adăugați un e.stopPropagation() la sfârșitul funcției –  > Por dpb.
Andrea

Am scris un mic plugin pentru a face mai ușor să legăm „on enter key pressed” un eveniment:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Utilizare:

$("#input").enterKey(function () {
    alert('Enter!');
})

Comentarii

  • Acest lucru nu funcționează pentru mine (am primit #input pe <input> câmp) –  > Por Rápli András.
  • Ce se întâmplă dacă elementul #input va fi dinamic? –  > Por Jigar7521.
  • @mplungjan nu sunt sigur ce vrei să spui prin „delegare” –  > Por Andrea.
  • $("#input").on("someevent","someselector",function () {}) –  > Por mplungjan.
Ian Roke

Nu am reușit să fac să funcționeze codul postat de @Paolo Bergantino, dar când l-am schimbat în $(document) și e.which în loc de e.keyCode atunci am constatat că funcționează fără probleme.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Legătura cu exemplul de pe JS Bin

Comentarii

  • Pentru mine e.care nu funcționează cu IE. Funcționează pentru alții? –  > Por Umesh Rajbhandari.
  • Ce versiune de IE? Funcționează bine pentru mine pe IE7. –  > Por Ian Roke.
  • Din documentația jQuery „Proprietatea event.which normalizează event.keyCode și event.charCode. Se recomandă să urmăriți event.which pentru introducerea tastelor de la tastatură.” –  > Por Riccardo Galli.
jesal

Am constatat că acest lucru este mai compatibil între browsere:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

Comentarii

  • Ternary IF poate fi prescurtat astfel: var keycode = event.keyCode || event.which; – –  > Por pistol-pete.
  • Pentru butoanele din interiorul formularelor, am pus această linie înainte de alertă (sau de acțiune): event.preventDefault(); Împiedică trimiterea formularului. –  > Por Jorge Mauricio.
Nasruddin

Puteți face acest lucru folosind mânerul de eveniment „keydown” de la jquery „keydown

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

Comentarii

  • Folosesc acest răspuns deoarece am nevoie să verific de la un anumit id de intrare. Mulțumiri –  > Por Faisal.
Gibolt

Utilizați event.key și JS modern!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

sau fără jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Docs

Browsere acceptate

Samuel Kwame Antwi

Am petrecut ceva timp venind cu această soluție sper că ajută pe cineva.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

Richard Simões

Există o keypress() metoda de eveniment. Numărul ascii al tastei Enter este 13 și nu depinde de browserul utilizat.

joeln

O extensie minoră a răspunsului lui Andrea de mai sus face ca metoda de ajutor să fie mai utilă atunci când doriți să capturați și apăsările modificate ale tastelor Enter (de exemplu, ctrl-enter sau shift-enter). De exemplu, această variantă permite o legare de genul:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

să trimită un formular atunci când utilizatorul apasă ctrl-enter cu focalizarea pe textarea formularului respectiv.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(a se vedea, de asemenea, Ctrl+Enter jQuery în TEXTAREA)

jp2code

În unele cazuri, este posibil să fie necesar să suprimați ENTER pentru o anumită zonă a unei pagini, dar nu și pentru alte zone ale paginii, cum ar fi pagina de mai jos care conține un formular antet <div> cu un SEARCH câmp de căutare.

Mi-a luat ceva timp să-mi dau seama cum să fac acest lucru și postez acest exemplu simplu, dar complet, aici sus pentru comunitate.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Legătură către JSFiddle Playground: The [Submit] nu face nimic, dar apăsarea butonului ENTER de la unul dintre controalele Casetei de text nu va trimite formularul.

jonathan klevin

Încercați acest lucru pentru a detecta tasta Enter apăsată.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

Consultați demonstrația @ detectează apăsarea tastei Enter pe tastatură

Justin Liu

Am folosit $(document).on("keydown").

Pe unele browsere keyCode nu este acceptat. Același lucru cu which deci dacă keyCode nu este suportat, trebuie să utilizați which și viceversa.

Zoe_NS

În calitate de keypress nu este acoperit de nicio specificație oficială, comportamentul real întâlnit la utilizarea acestuia poate diferi de la un browser la altul, de la o versiune de browser la alta și de la o platformă la alta.

Sper că va fi util!

Comentarii

  • De reținut, motivul pentru care keypress nu este în specificație (mai) este că a fost depreciat (MDN). –  > Por YellowAfterlife.
Prashanth Garlapally
$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});

user2216399

Modul simplu de a detecta dacă utilizatorul a apăsat enter este de a folosi numărul de taste numărul tastei enter este =13 pentru a verifica valoarea tastei în dispozitivul dvs.

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

prin apăsarea tastei enter veți obține rezultatul ca 13 . folosind valoarea tastei puteți apela o funcție sau puteți face orice doriți

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

dacă doriți să direcționați un buton odată ce tasta enter este apăsată, puteți utiliza codul următor

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Sper să vă fie de ajutor

Duan Walker

Cred că cea mai simplă metodă ar fi folosirea vanilla javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

Tayfun Açıkgöz
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

Comentarii

  • Ați putea să adăugați câteva comentarii explicative pentru a explica solicitantului cum funcționează codul dvs. – mulțumesc. –  > Por SaschaM78.
AzizAhmad
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Comentarii

  • Aceasta pare o adaptare a altor răspunsuri – ai putea adăuga câteva explicații pentru a-l face pe al tău la fel de interesant ca și celelalte? –  > Por Nico Haase.
Ankit Singh

așa am rezolvat eu, ar trebui să dai return false;

`