Wie erkennt man das Drücken der Eingabetaste auf der Tastatur mit jQuery?

731

Ich möchte feststellen, ob der Benutzer Entermit jQuery gedrückt hat .

Wie ist das möglich? Benötigt es ein Plugin?

EDIT: Es sieht so aus, als müsste ich die keypress()Methode verwenden.

Ich wollte wissen, ob jemand weiß, ob es Browserprobleme mit diesem Befehl gibt - wie gibt es Probleme mit der Browserkompatibilität, über die ich Bescheid wissen sollte?

chris
quelle
Link zu dieser .keypress () | jQuery API-Dokumentation
Haim Evgi
5
Eines der besten Dinge in Javascript-Frameworks ist, dass sie standardmäßig browserübergreifend kompatibel sein sollten. Sie übernehmen die Browserkompatibilitätsprüfungen, damit der Benutzer dies nicht tun muss. Ich habe den JQuery-Quellcode nicht gelesen, bezweifle jedoch, dass die Tastendruckfunktion in diesem Sinne anders ist.
Miek
2
Das einzige Problem mit der Browserkompatibilität besteht darin, dass Sie e.which anstelle von e.keyCode verwenden sollten, um den ASCII-Code zu erkennen.
Daniel

Antworten:

1330

Der springende Punkt bei jQuery ist, dass Sie sich keine Gedanken über Browserunterschiede machen müssen. Ich bin mir ziemlich sicher, dass Sie mit enter13 in allen Browsern sicher sein können . In diesem Sinne können Sie Folgendes tun:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
Paolo Bergantino
quelle
7
Ich verlinke darauf, weil ich dies gelesen habe und mir den Kopf zerkratzt habe, warum der Tastendruck mit dem Internet Explorer nicht funktioniert hat. (es wird nicht $(window)unter IE gebunden
Incognito
17
e.keyCode ist nicht 100% browserübergreifend. Verwenden Sie stattdessen e.which wie unten gezeigt
Daniel
15
Aus der jQuery-Dokumentation "Die Eigenschaft event.which normalisiert event.keyCode und event.charCode. Es wird empfohlen, event.which auf Tastatureingaben zu überwachen."
Riccardo Galli
20
$ (document) .on ('Tastendruck', Funktion (e) {
user956584
5
Ich erhalte aufgrund der Ereignisausbreitung mehrere Ausführungen der angegebenen Funktion (dh die Warnung wird zweimal ausgelöst). Um dies zu stoppen, fügen Sie am Ende der Funktion eine e.stopPropagation () hinzu
dpb
129

Ich habe ein kleines Plugin geschrieben, um das Binden der "On Enter-Taste gedrückt" eines Ereignisses zu vereinfachen:

$.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);
            }
        })
    })
}

Verwendungszweck:

$("#input").enterKey(function () {
    alert('Enter!');
})
Andrea
quelle
Das funktioniert bei mir nicht (ich #input<input>
bin
1
Was ist, wenn das # input-Element dynamisch ist?
Jigar7521
@mplungjan nicht sicher, was Sie mit "delegieren" meinen
Andrea
$("#input").on("someevent","someselector",function () {})
Mplungjan
62

Ich konnte den von @Paolo Bergantino geposteten Code nicht zum Laufen bringen, aber als ich ihn geändert habe $(document)und e.whichstattdessen e.keyCodefestgestellt habe, dass er fehlerfrei funktioniert.

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

Link zum Beispiel auf JS Bin

Ian Roke
quelle
Für mich e.which funktioniert nicht mit IE. Funktioniert es für andere?
Umesh Rajbhandari
Welche Version von IE? Funktioniert gut für mich auf IE7.
Ian Roke
Aus der jQuery-Dokumentation "Die Eigenschaft event.which normalisiert event.keyCode und event.charCode. Es wird empfohlen, event.which auf Tastatureingaben zu überwachen."
Riccardo Galli
52

Ich fand das browserübergreifender kompatibel:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
Jesus
quelle
1
Ihre ternäre IF kann verkürzt werden zu: var keycode = event.keyCode || event.which;
Pistole-Pete
29

Sie können dies mit dem Ereignis-Handle "keydown" von jquery tun

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

Verwenden Sie event.keyund moderne JS!

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

oder ohne jQuery:

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

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
9

Ich habe einige Zeit damit verbracht, diese Lösung zu finden. Ich hoffe, sie hilft jemandem.

$(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');
    }
  });

});
Samuel Kwame Antwi
quelle
8

Es gibt eine keypress () -Ereignismethode . Die ASCII-Nummer der Eingabetaste lautet 13 und hängt nicht davon ab, welcher Browser verwendet wird.

Richard Simões
quelle
7

Eine geringfügige Erweiterung der obigen Antwort von Andrea macht die Hilfsmethode nützlicher, wenn Sie möglicherweise auch geänderte Eingabetasten erfassen möchten (z. B. Strg-Eingabe oder Umschalt-Eingabe). Diese Variante ermöglicht beispielsweise eine Bindung wie:

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

Senden eines Formulars, wenn der Benutzer die Strg-Eingabetaste drückt, wobei der Schwerpunkt auf dem Textbereich des Formulars liegt.

$.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);
            }
        })
    })
}

(Siehe auch Strg + Enter jQuery in TEXTAREA )

joeln
quelle
4

In einigen Fällen müssen Sie möglicherweise den ENTERSchlüssel für einen bestimmten Bereich einer Seite unterdrücken, jedoch nicht für andere Bereiche einer Seite, z. B. die folgende Seite, die einen Header <div> mit einer SUCHE enthält Feld enthält.

Ich habe ein bisschen gebraucht, um herauszufinden, wie das geht, und ich poste dieses einfache, aber vollständige Beispiel hier oben für die Community.

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

Link zum JSFiddle-Spielplatz : Die [Submit]Schaltfläche bewirkt nichts, aber durch Drücken ENTEReines der Textfeld-Steuerelemente wird das Formular nicht gesendet.

jp2code
quelle
4

Versuchen Sie dies, um die gedrückte Eingabetaste zu erkennen.

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

Siehe Demo @ Detect Enter-Tastendruck auf der Tastatur

Jonathan Klevin
quelle
2

Da das keypressEreignis nicht durch eine offizielle Spezifikation abgedeckt ist, kann das tatsächliche Verhalten bei seiner Verwendung je nach Browser, Browserversion und Plattform unterschiedlich sein.

$(document).keydown(function(event) {
  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
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Ich hoffe es wäre nützlich!

Zoe_NS
quelle
Der Grund dafür, dass keypresses nicht mehr in der Spezifikation ist, ist, dass es veraltet ist ( MDN ).
YellowAfterlife
Also habe ich
0

Der einfache Weg, um festzustellen, ob der Benutzer die Eingabetaste gedrückt hat, besteht darin, die Schlüsselnummer zu verwenden. Die Eingabetaste lautet = 13, um den Wert der Taste in Ihrem Gerät zu überprüfen

$("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);
});

Durch Drücken der Eingabetaste erhalten Sie das Ergebnis 13. Mit dem Schlüsselwert können Sie eine Funktion aufrufen oder tun, was Sie wollen

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

Wenn Sie nach Drücken der Eingabetaste auf eine Schaltfläche zielen möchten, können Sie den Code verwenden

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

Hoffe es hilft

user2216399
quelle
0

Ich denke, die einfachste Methode wäre die Verwendung von Vanille- Javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
Duan Walker
quelle
0
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
Tayfun Açıkgöz
quelle
3
Könnten Sie ein paar erklärende Kommentare hinzufügen, um dem Fragesteller zu erklären, wie Ihr Code funktioniert - danke.
SaschaM78
0
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
AzizAhmad
quelle
Dies sieht aus wie eine Anpassung anderer Antworten. Können Sie eine Erklärung hinzufügen, um Ihre Antworten so interessant wie die anderen zu machen?
Nico Haase
0

Ich habe benutzt $(document).on("keydown").

In einigen Browsern keyCodewird dies nicht unterstützt. Das Gleiche gilt which, wenn dies keyCodenicht unterstützt wird, müssen Sie es verwenden whichund umgekehrt.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Justin Liu
quelle