<Eingabe> Textänderungsereignisse

Question

Gibt es eine Bibliothek, die alle Textereignisse aus einer <input type=text> (oder contentEditable -- jedes einzeilige Eingabefeld) Element?

Insbesondere muss ich wissen, wann der Text durch geändert wird:

• Tippen (asdf, Rücktaste)
• Ausschneiden/Einfügen
• Tastenkombinationen (z. B. ctrl+bksp oder option+bksp löscht das vorherige Wort)
• Text per Ziehen und Ablegen
• Aktionen im Bearbeitungsmenü

Und vorzugsweise, was sich geändert hat (ob und welcher Text eingefügt, gelöscht oder ersetzt wurde).

Muss mit Chrome, Safari, Firefox 3+, IE9+ funktionieren.

Answer 1

Die HTML5 oninput wird von all diesen Browsern unterstützt und funktioniert sehr ähnlich wie das Ereignis onchange Ereignis, sondern wird ausgelöst, sobald sich die Eingabe des Elements ändert. Es ist auch blasenförmig, so dass Sie es weiter oben im Dokumentbaum erfassen können.

element.oninput = function () {

}

Arbeits-Demo: http://jsfiddle.net/Zfthe/

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

Answer 2

Ich hatte gestern ein ähnliches Problem und habe eine Lösung gefunden, um alte und neue Texteingabewerte zu unterscheiden.

Die Ausgabe sieht folgendermaßen aus:

Alter Wert: test test
Neuer Wert: test w
Änderung: Überschreiben von 'test' mit 'w' an Position 5

Das Skript verwendet window.setInterval(), um browserübergreifende Probleme zu vermeiden (siehe https://stackoverflow.com/a/1949416/727190 ). Dies führt dazu, dass einige Änderungen gestapelt werden, wenn der Benutzer sehr schnell tippt - dies könnte eine gute Sache sein, hängt von Ihrer Situation ab.

Sie können das Skript jedoch leicht so ändern, dass es mit Ereignissen arbeitet.

http://jsfiddle.net/6zp48/2/

Auszug aus einem Fiddle, der das Ergebnis des Diffs zeigt (der findChange()-Code ist zu lang, um ihn hier einzufügen):

var changeType = { added: 0, deleted: 1, overwrite: 2 };
var previousValue = '';

window.setInterval(checkChange, 100);

function checkChange() {
    var newValue = $("#input1").val();
    if(newValue != previousValue) {
        showChange(findChange(previousValue, newValue));
        previousValue = newValue;
    }
}

function showChange(result) {
    $("#last-change").html("Prev: " + previousValue + "<br/>Next:" + $("#input1").val() + "<br/>");

    if(result == null)  {
        $("#last-change").html($("#last-change").html() + " no change detected");
        return;
    }

    switch (result.change) {
        case changeType.added:
            $("#last-change").html($("#last-change").html() + "added '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
        case changeType.deleted:
            $("#last-change").html($("#last-change").html() + "deleted '" + result.lost.text + "' at position " + result.lost.position + "<br />");
            break;
        case changeType.overwrite:
            $("#last-change").html($("#last-change").html() + "overwrote '" + result.lost.text + "' with '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
    }
}

Answer 3

Kurze Antwort

$('input').on('keydown keyup click input submit mouseenter', function (e) {
    // Handle e.type
    alert('Type: ' + e.type);
});

Fügen Sie unterstützte oder benutzerdefinierte Ereignisse hinzu, es sollte funktionieren. Ich hoffe, das hilft jemandem Siehe Jquery-Dokumentation für weitere Hilfe. http://api.jquery.com/on/