Zdarzenie zmiany kodu JavaScript w elemencie wejściowym jest uruchamiane tylko po utracie aktywności

Mam element wejściowy i chcę nadal sprawdzać długość treści i za każdym razem, gdy długość będzie równa określonemu rozmiarowi, chcę włączyć przycisk przesyłania, ale mam problem ze zdarzeniem zmiany JavaScript jako zdarzeniem uruchamia się tylko wtedy, gdy element wejściowy wykracza poza zakres, a nie w przypadku zmiany zawartości.

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

---- onchange nie uruchamia się przy zmianie treści nazwy, ale uruchamia się tylko wtedy, gdy nazwa traci ostrość.

Czy jest coś, co mogę zrobić, aby to wydarzenie działało przy zmianie treści? lub jakieś inne wydarzenie, które mogę wykorzystać do tego? Znalazłem obejście problemu, używając funkcji onkeyup, ale to nie uruchamia się, gdy wybieramy jakąś zawartość z automatycznego uzupełniania przeglądarki.

Chcę czegoś, co zadziała, gdy zawartość pola zmieni się za pomocą klawiatury lub myszy ... jakieś pomysły?

(function () {
    var oldVal;

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

Będzie to złapać change, klawiszy, paste, textInput, input(jeśli jest dostępny). I nie strzelaj więcej niż to konieczne.

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

Bibliografia:

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

Agent użytkownika musi wywołać to zdarzenie po wprowadzeniu co najmniej jednego znaku. Znaki te mogą pochodzić z różnych źródeł, np. Znaki wynikające z naciśnięcia lub zwolnienia klawisza na urządzeniu z klawiaturą, z przetwarzania w edytorze metod wprowadzania lub wynikające z polecenia głosowego. Tam, gdzie operacja „wklej” generuje prostą sekwencję znaków, tj. Fragment tekstu bez żadnych informacji o strukturze lub stylu, należy również wygenerować ten typ zdarzenia.

input- typ zdarzenia HTML5 .

Uruchamiane w kontrolkach, gdy użytkownik zmienia wartość

Obsługują go Firefox, Chrome, IE9 i inne nowoczesne przeglądarki.

To zdarzenie występuje natychmiast po modyfikacji, w przeciwieństwie do zdarzenia onchange, które występuje, gdy element traci fokus.

Jako rozszerzenie odpowiedzi katspaugh, oto sposób zrobienia tego dla wielu elementów przy użyciu klasy css.

   $('.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());
        }
    });

Znalezienie go zajęło mi 30 minut, ale to działa w czerwcu 2019 r.

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

a jeśli chcesz programowo dodać detektor zdarzeń w js

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

Zrób to w sposób jQuery:

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


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

Możesz użyć onkeyup

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

Musiałbyś użyć kombinacji onkeyupi onclick(lub onmouseup), jeśli chcesz złapać każdą możliwość.

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

Oto inne rozwiązanie, które opracowuję dla tego samego problemu. Jednak używam wielu pól wejściowych, więc zachowuję starą wartość jako atrybut zdefiniowany przez użytkownika samych elementów: „data-value”. Korzystanie z jQuery jest bardzo łatwe w zarządzaniu.

        $(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);
                }
            }
        });

tutaj jest, użyłem 5-6 pól wejściowych z klasą „filterBox”, sprawiam, że metoda filterBy działa tylko wtedy, gdy data-value jest inna niż jej własna wartość.