Text wird mit Verzögerung angezeigt

Question

I Text möchte ich in einem Textfeld eingeben sofort in einem div gezeigt werden:

function func() { 
 
    document.getElementById("query").innerHTML = document.getElementById("keyword").value; 
 
} 
 
window.onload = function() { 
 
    keyword.onkeydown = function(e) { 
 
    func(); 
 
    } 
 
}

<input type="text" id="keyword" size="40"> 
 
<div id="query"></div>

das einzige Problem ist, ist es mit es funktioniert, angezeigt eine Verzögerung.

Also wenn ich "abc" eingeben, zeigt es nur "ab". Ich muss ein anderes Zeichen eingeben, zum Beispiel "abcd", so dass es "abc" anzeigt.
Das letzte Zeichen fehlt immer.

Hier können Sie es ausprobieren: http://jsfiddle.net/285cz0np/

Answer 1

Die Veranstaltung onkeydown gefeuert wird. Da sich der Wert des Eingabeelements noch nicht geändert hat, werden die Ergebnisse nicht angezeigt.

Sie könnten es zu onkeyup ändern, stattdessen: (updated example). Oder Sie können eine Verzögerung einstellen, bevor Sie die Funktion aufrufen.

---

Alternativ können Sie auch auf die input event hören:

Example Here

document.getElementById("keyword").addEventListener('input', function (e) { 
    document.getElementById("query").textContent = e.target.value; 
}); 

Answer 2

Das Problem ist, weil der Eingangstextwert, nicht, bis Sie die Taste loslassen ändern. von setTimeout verwenden Sie den Browser lassen den Wert, vor läuft Ihre Funktion (func)

Ich empfehle nicht onkeyup zu ändern, zu aktualisieren, weil Sie onkeydown wollen, wird diese Lösung arbeiten immer noch die onkeydown Veranstaltung mit

keyword.onkeydown = function (e) { 
     setTimeout(func,0) 
    } 

aktualisieren Beispiel jsFiddle: http://jsfiddle.net/285cz0np/1/

ich empfehle Ihnen zu input Ereignis zu ändern. Wenn der Benutzer beispielsweise aus der Zwischenablage (mit nur der Maus) einfügen, wird Ihr Ereignis nicht ausgelöst.

Answer 3

Dies liegt daran, dass das Ereignis, das die Funktion auslöst, onkeydown ist. Wenn die Taste gedrückt wird, liest die Funktion den Wert des Textbereichs. Zu diesem Zeitpunkt liest es die Daten, die gedrückte Taste wurde noch nicht zum aktuellen Wert hinzugefügt.

Eine einfache Lösung besteht darin, das Ereignis in onkeyup zu ändern, da zu dem Zeitpunkt, zu dem sich der Schlüssel im Status "up" befindet, der Wert dieses Schlüssels zum Wert hinzugefügt wird.

window.onload = function() { 
    keyword.onkeyup = function (e) { 
     func(); 
    } 
}