Das Javascript-Änderungsereignis für das Eingabeelement wird ausgelöst, wenn nur der Fokus verloren geht

Ich habe ein Eingabeelement und möchte die Länge des Inhalts weiter überprüfen. Wenn die Länge einer bestimmten Größe entspricht, möchte ich die Senden-Schaltfläche aktivieren, habe jedoch ein Problem mit dem Ereignis onchange von Javascript als Ereignis wird nur ausgelöst, wenn das Eingabeelement den Gültigkeitsbereich verlässt und nicht, wenn sich der Inhalt ändert.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange wird nicht ausgelöst, wenn der Inhalt des Namens geändert wird, sondern nur, wenn der Name unscharf wird.

Kann ich etwas tun, damit diese Veranstaltung an Inhaltsänderungen arbeitet? oder ein anderes Ereignis, das ich dafür verwenden kann? Ich habe eine Problemumgehung mithilfe der Onkeyup-Funktion gefunden, die jedoch nicht ausgelöst wird, wenn wir Inhalte aus dem automatischen Vervollständiger des Browsers auswählen.

Ich möchte etwas, das funktionieren kann, wenn sich der Inhalt des Feldes per Tastatur oder Maus ändert ... irgendwelche Ideen?

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

Dies wird fangen change, Tastenanschläge, paste, textInput, input(wenn verfügbar). Und nicht mehr als nötig schießen.

http://jsfiddle.net/katspaugh/xqeDj/

Verweise:

textInput- ein W3C DOM Level 3-Ereignistyp. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Ein Benutzeragent muss dieses Ereignis auslösen, wenn ein oder mehrere Zeichen eingegeben wurden. Diese Zeichen können aus einer Vielzahl von Quellen stammen, z. B. Zeichen, die aus dem Drücken oder Loslassen einer Taste auf einem Tastaturgerät, aus der Verarbeitung eines Eingabemethoden-Editors oder aus einem Sprachbefehl resultieren. Wenn eine Einfügeoperation eine einfache Folge von Zeichen generiert, dh eine Textpassage ohne Struktur- oder Stilinformationen, sollte auch dieser Ereignistyp generiert werden.

input- ein HTML5- Ereignistyp.

Wird an Steuerelementen ausgelöst, wenn der Benutzer den Wert ändert

Firefox, Chrome, IE9 und andere moderne Browser unterstützen dies.

Dieses Ereignis tritt unmittelbar nach der Änderung auf, im Gegensatz zum Ereignis onchange, das auftritt, wenn das Element den Fokus verliert.

Als Erweiterung der Antwort von katspaugh können Sie dies für mehrere Elemente mithilfe einer CSS-Klasse tun.

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

Ich habe 30 Minuten gebraucht, um es zu finden, aber das funktioniert im Juni 2019.

<input type="text" id="myInput" oninput="myFunction()">

und wenn Sie einen Ereignis-Listener programmgesteuert in js hinzufügen möchten

inputElement.addEventListener("input", event => {})

Mach es wie bei jQuery:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

Sie können onkeyup verwenden

<input id="name" onkeyup="checkLength(this.value)" />

Sie müssten eine Kombination von onkeyupund onclick(oder onmouseup) verwenden, wenn Sie jede Möglichkeit nutzen möchten.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

Hier ist eine andere Lösung, die ich für das gleiche Problem entwickle. Ich verwende jedoch viele Eingabefelder, sodass ich den alten Wert als benutzerdefiniertes Attribut der Elemente selbst behalte: "Datenwert". Mit jQuery ist es so einfach zu verwalten.

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

Hier ist, ich habe 5-6 Eingabefelder mit der Klasse 'filterBox' verwendet. Ich lasse die filterBy-Methode nur laufen, wenn sich der Datenwert von seinem eigenen Wert unterscheidet.