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

Question

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

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

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

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

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

Answer 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 уровня 3.http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

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

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

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

Firefox, Chrome, IE9 и другие современные браузеры

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

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

Answer 3

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

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


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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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