it-swarm.com.de

javaScript-Änderungsereignis für Eingabeelemente wird nur ausgelöst, wenn der Fokus verloren geht

Ich habe ein Eingabeelement und möchte weiterhin die Länge des Inhalts ü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 bei inhaltlichen Änderungen funktioniert? oder ein anderes Ereignis, das ich dafür nutzen kann? Ich habe eine Problemumgehung mithilfe der Onkeyup-Funktion gefunden, die jedoch nicht ausgelöst wird, wenn wir Inhalte aus dem Autovervollständiger des Browsers auswählen.

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

69
Sachin Midha
(function () {
    var oldVal;

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

Dies fängt change, Tastatureingaben, paste, textInput, input ab (sofern verfügbar). Und nicht mehr als nötig feuern.

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


Verweise:

textInput - 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 worden Diese Zeichen können aus einer Vielzahl von .__ stammen. Quellen, z. B. Zeichen, die sich aus einer gedrückten Taste oder .__ ergeben. Auf einem Tastaturgerät freigegeben, aus der Verarbeitung einer Eingabemethode Editor oder aus einem Sprachbefehl resultieren. Wo eine "Einfügen" -Operation erzeugt eine einfache Zeichenfolge, d. h. eine Textpassage Ohne Struktur- oder Stilinformationen sollte dieser Ereignistyp .__ sein. als auch generiert.

input - ein HTML5 Ereignistyp.

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

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

Dieses Ereignis tritt unmittelbar nach der Änderung ein, im Gegensatz zum onchange-Ereignis, bei dem das Element den Fokus verliert.

103
katspaugh

Als Erweiterung der Antwort auf katspaugh können Sie dies mit Hilfe einer CSS-Klasse für mehrere Elemente 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());
        }
    });
9
SSZero

Mach es auf die jQuery-Weise:

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


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

Hier ist eine andere Lösung, die ich für dasselbe Problem entwickle. Ich verwende jedoch viele Eingabefelder, um den alten Wert als benutzerdefiniertes Attribut der Elemente selbst beizubehalten: "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);
                }
            }
        });

in diesem Fall habe ich 5-6 Eingabefelder mit der Klasse 'filterBox', .__ verwendet. Ich mache die filterBy-Methode nur, wenn der Datenwert sich von seinem eigenen Wert unterscheidet.

0
efirat

Sie können onkeyup verwenden

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

Ich habe 30 Minuten gebraucht, um es zu finden, aber dies 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 => {})
0
franmcod

Sie müssten eine Kombination aus onkeyup und onclick (oder onmouseup) verwenden, wenn Sie alle Möglichkeiten nutzen möchten.

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