Событие изменения Javascript на элементе ввода срабатывает только при потере фокуса

У меня есть элемент ввода, и я хочу продолжать проверять длину содержимого, и всякий раз, когда длина становится равной определенному размеру, я хочу включить кнопку отправки, но я столкнулся с проблемой с событием onchange Javascript в качестве события срабатывает только тогда, когда элемент ввода выходит за пределы области видимости, а не при изменении содержимого.

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

---- onchange не срабатывает при изменении содержимого имени, а только срабатывает, когда имя выходит из фокуса.

Могу ли я что-то сделать, чтобы это мероприятие работало над изменением содержания? или какое-то другое мероприятие, которое я могу использовать для этого? Я нашел обходной путь с помощью функции onkeyup, но она не срабатывает, когда мы выбираем некоторый контент из автозаполнения браузера.

Я хочу что-то, что может работать, когда содержимое поля изменяется с помощью клавиатуры или мыши ... какие-нибудь идеи?

(function () {
    var oldVal;

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

Это будет поймать change, нажатие клавиш, paste, textInput, input(при наличии). И не стрелять больше, чем нужно.

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

Рекомендации:

textInput- тип события W3C DOM Level 3. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Пользовательский агент должен отправить это событие, когда был введен один или несколько символов. Эти символы могут происходить из множества источников, например, символов, возникающих в результате нажатия или отпускания клавиши на клавиатуре, в результате обработки редактором метода ввода или в результате голосовой команды. Если операция «вставки» генерирует простую последовательность символов, т. Е. Текстовый отрывок без какой-либо информации о структуре или стиле, этот тип события также должен генерироваться.

input- тип события HTML5 .

Выстреливается в элементы управления, когда пользователь изменяет значение

Firefox, Chrome, IE9 и другие современные браузеры поддерживают его.

Это событие происходит сразу после модификации, в отличие от события onchange, которое происходит, когда элемент теряет фокус.

В качестве дополнения к ответу Катспо, вот способ сделать это для нескольких элементов с помощью класса 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());
        }
    });

Мне потребовалось 30 минут, чтобы найти его, но он работает в июне 2019 года.

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

и если вы хотите программно добавить прослушиватель событий в js

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

Сделайте это способом jQuery:

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


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

Вы можете использовать onkeyup

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

Вам придется использовать комбинацию onkeyupи onclick(или onmouseup), если вы хотите уловить любую возможность.

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

Вот еще одно решение, которое я разрабатываю для той же проблемы. Однако я использую много полей ввода, поэтому я сохраняю старое значение как определяемый пользователем атрибут самого элемента: «значение-данные». Используя jQuery, им так легко управлять.

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

вот, я использовал 5-6 полей ввода с классом filterBox, я заставляю метод filterBy запускаться только в том случае, если значение данных отличается от его собственного значения.