Wie kann ich jquery .val () NACH einem Tastendruckereignis erhalten?

100

Ich habe:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Jetzt gibt die Warnung immer den Wert VOR dem Tastendruck zurück (z. B. wenn das Feld leer ist, gebe ich 'a' ein und die Warnung gibt mir ''. Dann gebe ich 'b' ein und die Warnung gibt mir 'a' ...). Aber ich möchte den Wert NACH dem Tastendruck - wie kann ich das tun?

Hintergrund: Ich möchte eine Schaltfläche aktivieren, sobald das Textfeld mindestens ein Zeichen enthält. Ich führe diesen Test bei jedem Tastendruckereignis aus, aber mit dem zurückgegebenen val () ist das Ergebnis immer einen Schritt zurück. Die Verwendung des change () -Ereignisses ist für mich keine Option, da die Schaltfläche dann deaktiviert wird, bis Sie das Textfeld verlassen. Wenn es einen besseren Weg gibt, bin ich froh, das zu hören!

Jörg Brenninkmeyer
quelle
Sollte die Schaltfläche wieder deaktiviert werden, wenn der Text gelöscht wird? Wenn ja, müssen Sie wahrscheinlich beim Tastendruck bleiben.
Brilliand

Antworten:

152

Wechseln keypresszu keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypresswird ausgelöst, wenn die Taste gedrückt wird, keyupwird ausgelöst, wenn die Taste losgelassen wird.

Hurra, ich helfe
quelle
@ Brilliand Du hast recht. Ich habe eine Problemumgehung dafür gemacht, die unten aufgeführt ist.
David Oliveros
7
Wie erreichen Sie dies auf iPhone / Android-Geräten? Sie unterstützen die Keyup-Funktion nicht.
Merijn Den Houting
4
Die Definition des Tastendrucks ist nicht genau korrekt. Das ist die Definition von Keydown. siehe quirksmode.org/dom/events/keys.html
Challet
58

Überrascht, dass niemand das js "Eingabe" -Ereignis erwähnte:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Empfohlen.

https://developer.mozilla.org/en-US/docs/Web/Events/input

Billynoah
quelle
8
Wow, dies ist die Antwort auf mehrere unbeantwortete / schlecht beantwortete SO-Fragen.
Ben Racicot
4
Dies ist auch dann hilfreich, wenn Sie das Drücken von Pfeiltasten, das Verschieben usw. im Eingabefeld ignorieren müssen.
Hovado
2
caniuse.com/#search=input Relativ gute Browserunterstützung. Viel bessere Antwort als jedes Keyup anzuhören.
James Haug
1
Es rettet meinen Tag! Danke dir. Ich habe den folgenden Code verwendet: $ ('. Subject_mark'). On ("input", function () {var $ th = $ (this); $ th.val ($ th.val (). Replace (/ [^ 0-9] / g, Funktion (str) {return '';}))
arsho
9

Verwenden Sie anstelle des Tastendrucks die Taste .

Kris van der Mast
quelle
5

Alternativ können Sie das Keydown-Ereignis mit einem Timeout von 0 verwenden.

Auf diese Weise werden die Änderungen sofort übernommen, anstatt angewendet zu werden, wenn der Benutzer die Taste nicht mehr gedrückt hält.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
David Oliveros
quelle
Dies wird sich immer noch seltsam verhalten, wenn Sie die Rücktaste gedrückt halten ... vielleicht Tastendruck mit einer Zeitüberschreitung von 0?
Brilliand
Ah, egal, das OP legt nicht fest, was passieren soll, wenn das Textfeld gelöscht wird.
Brilliand
4

Möglicherweise möchten Sie einen onchangeEreignishandler anschließen, anstatt eines der Schlüsselereignisse zu verwenden.

$(someTextInputField).change(function() {
    alert($(this).val());
});

Wenn Sie Edit > Pasteoder einen Rechtsklick und dann Einfügen verwenden, wird ein Änderungsereignis ausgelöst, jedoch kein Schlüsselereignis. Beachten Sie, dass einige Browser möglicherweise ein Schlüsselereignis beim Einfügen simulieren (obwohl ich keines kenne), aber Sie können sich nicht auf dieses Verhalten verlassen.

Stephen P.
quelle
4

Versuchen Sie so etwas:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

Dies führt lediglich zu einer Zeitüberschreitung, sodass Ihr Code nach Abschluss der Ereignisschleife "Tastendruck" fast unmittelbar danach ausgeführt wird. Ein so kurzes Timer-Intervall (auch wenn es vom Browser aufgerundet wird) wird nicht bemerkt.

bearbeiten - oder Sie könnten "keyup" verwenden, wie alle anderen sagen, obwohl die Semantik unterschiedlich ist.

Spitze
quelle
Es geht nicht um Benig Smart . Das Keyup-Ereignis liefert nicht das gleiche Ergebnis. Mit der Taste erhalten Sie unterschiedliche Ereignisse für Umschalt, Strg usw. - wenn Sie möchten, dass das tatsächlich eingegebene Zeichen (z. B. ein kaufmännisches Und) anstelle einer Reihe von Schlüsselereignissen eingegeben wird, müssen Sie den Status der Umschalt- oder Strg-Taste überprüfen und die Taste drücken ist der Weg zu gehen.
Ripside
1
Richtig; das habe ich mit "es ist Semantik ist anders" gemeint.
Pointy