Подія зміни 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 рівня 3. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Агент користувача повинен надіслати цю подію, коли введено один або кілька символів. Ці символи можуть походити з різних джерел, наприклад, символи, що є результатом натискання або відпускання клавіші на клавіатурному пристрої, обробки редактора методу введення або результату голосової команди. Якщо операція “вставка” генерує просту послідовність символів, тобто уривок тексту без будь-якої інформації про структуру чи стиль, слід генерувати і цей тип події.

input- тип події HTML5 .

Здійснюється на елементах керування, коли користувач змінює значення

Це підтримують Firefox, Chrome, IE9 та інші сучасні браузери.

Ця подія відбувається відразу після модифікації, на відміну від події onchange, яка відбувається, коли елемент втрачає фокус.

Як розширення відповіді 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());
        }
    });

На його пошук у мене пішло 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 запускатися, лише якщо значення даних відрізняється від власного значення.