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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

(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, которое происходит, когда элемент теряет фокус.

Ответ 2

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Вот еще одно решение, которое я разрабатываю для той же проблемы. Однако я использую много полей ввода, поэтому сохраняю старое значение как определяемый пользователем атрибут самих элементов: "data-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 только в том случае, если значение данных отличается от его собственного значения.