Wie kann ich am besten verfolgen, ob sich etwas ändert, wenn ich input type="text" eingebe?

Question

Meiner Erfahrung nach, input type="text" onchange tritt in der Regel erst nach Ihrem Weggang ein ( blur ) die Kontrolle.

Gibt es eine Möglichkeit, den Browser zu zwingen, die onchange jedes Mal textfield Inhaltliche Änderungen? Wenn nicht, was ist der eleganteste Weg, dies "manuell" zu verfolgen?

Verwendung von onkey* Ereignisse ist nicht zuverlässig, da Sie mit der rechten Maustaste auf das Feld klicken und Einfügen wählen können, wodurch das Feld ohne Tastatureingabe geändert wird.

Es setTimeout der einzige Weg Hässlich :-)

Answer 1

Heutzutage hören Sie auf oninput . Es fühlt sich an wie onchange ohne den Fokus auf das Element verlieren zu müssen. Das ist HTML5.

Es wird von allen unterstützt (auch von mobilen Geräten), außer IE8 und darunter. Für IE hinzufügen onpropertychange . Ich verwende es so:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Answer 2

Aktualisierung:

Siehe Eine weitere Antwort (2015).

---

Originalantwort 2009:

Sie wollen also die onchange Ereignis, das bei Tastendruck ausgelöst wird, verwischen, y einfügen? Das ist Magie.

Wenn Sie Änderungen während der Eingabe verfolgen möchten, verwenden Sie "onkeydown" . Wenn Sie die Einfügeoperationen mit der Maus einfangen müssen, verwenden Sie "onpaste" ( IE , FF3 ) und "oninput" ( FF, Opera, Chrome, Safari 1 ).

1 _{Gebrochen für <code><textarea></code> auf Safari. Verwenden Sie <a href="http://help.dottoro.com/ljhiwalm.php" rel="noreferrer"><code>textInput</code></a> stattdessen}

Answer 3

Unten Code funktioniert gut für mich mit Jquery 1.8.3

HTML : <input type="text" id="myId" />

Javascript/JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Answer 4

Javascript ist hier unberechenbar und lustig.

• onchange tritt nur auf, wenn Sie das Textfeld verwischen
• onkeyup & onkeypress tritt nicht immer bei Textänderungen auf
• onkeydown tritt bei Textänderung auf (kann aber Ausschneiden und Einfügen mit Mausklick nicht verfolgen)
• onpaste & oncut erfolgt mit Tastendruck und sogar mit dem Rechtsklick der Maus.

Um also die Änderung im Textfeld zu verfolgen, benötigen wir onkeydown , oncut y onpaste . Wenn Sie im Callback dieses Ereignisses den Wert des Textfeldes überprüfen, erhalten Sie nicht den aktualisierten Wert, da der Wert nach dem Callback geändert wird. Eine Lösung für dieses Problem besteht darin, eine Timeout-Funktion mit einem Timeout von 50 Millisekunden (oder weniger) festzulegen, um die Änderung zu verfolgen.

Das ist ein schmutziger Hack, aber wie ich recherchiert habe, ist das die einzige Möglichkeit.

Hier ist ein Beispiel. http://jsfiddle.net/2BfGC/12/

Answer 5

Ich denke, im Jahr 2018 ist es besser, die input Veranstaltung.

-

Wie die WHATWG-Spezifikation beschreibt ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Wird bei Steuerelementen ausgelöst, wenn der Benutzer den Wert ändert (siehe auch die Ereignis ändern )

-

Hier ist ein Beispiel für die Verwendung der Funktion:

<input type="text" oninput="handleValueChange()">