Wie erhalte ich beim Einfügen den neuen Wert eines Textfeld-Eingabefelds? ⇐ HTML

[Anonymous]

Ich sehe, dass ich, wenn ich versuche, den Wert aus einem Textfeld zu lesen, wenn seine Funktion onpaste aufgerufen wird, den alten Wert des Felds (den vor dem Einfügevorgang) und nicht den neuen Wert (den nach dem Einfügevorgang) erhalte.

Hier ist eine Demonstration dieses Verhaltens: http://jsfiddle.net/qsDnr/

Eine Kopie des Codes folgt:

Code: Select all

On Paste

var textareaElement;
var previewElement;

function update()
{
previewElement.innerHTML = textareaElement.value;
}

window.onload = function() {
textareaElement = document.getElementById('textarea');
previewElement = document.getElementById('preview');
textareaElement.onpaste = update
}

Sie können das Verhalten mit den folgenden Schritten bestätigen.

• Kopieren Sie die Zeichenfolge foo in Ihre Zwischenablage.
• Klicken Sie mit der rechten Maustaste auf das Textfeld und wählen Sie „Einfügen“. Im div-Element wird nichts angezeigt.
• Klicken Sie mit der rechten Maustaste auf das Textfeld und wählen Sie erneut „Einfügen“. foo erscheint im div-Element.

Da ich möchte, dass das div-Element immer anzeigt, was im textarea-Element mit der Einfügeoperation aktualisiert wurde, ist die gewünschte Ausgabe foo und foo foo in Schritt 2 bzw. Schritt 3.

Eine Möglichkeit, die gewünschte Ausgabe zu erhalten, besteht darin, den Funktionsaufruf update() mit zu verzögern window.setTimeout(), also statt

Code: Select all

textareaElement.onpaste = update

Ich habe

Code: Select all

textareaElement.onpaste = function() {
window.setTimeout(update, 100);
};

diesmal (Demo: http://jsfiddle.net/cwpLS/). Das macht, was ich will. Dies fühlt sich jedoch eher wie eine Problemumgehung an und nicht wie eine einfache Möglichkeit, das zu tun, was ich will. Ich würde gerne wissen, ob es eine alternative oder bessere Möglichkeit gibt, dies zu tun.