Можно ли отслеживать изменение текста в поле ввода ОДИН РАЗ, а не на каждом входе?

Question

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

 var input = document.querySelector("#inputId");
 input.oninput = function (e) {
                   alert("changed"); 
                 }

Проблема в том, что это срабатывает каждый раз, когда пользователь удаляет или добавляет символ, тогда как я хочу знать только один раз, что они изменяют текст в тексте поле. Есть ли способ добиться этого? Я новичок в jQuery и JavaScript, поэтому мы будем благодарны за любое направление, спасибо!

Answer 1

Вы можете попробовать использовать Параметры option once: true:

once: логическое значение, указывающее, что прослушиватель должен вызываться максимум один раз после добавления. Если true, слушатель будет автоматически удален при вызове.

Обратите внимание: Inte rnet Обозреватель еще не поддерживает этот параметр. c.

var input = document.querySelector("#inputId");
input.addEventListener('input', () => {
  alert("changed"); 
}, {
  once: true
});

<input id="inputId"/>

Answer 2

Если вы хотите, чтобы обработчик событий запускался только один раз для каждого элемента, вам нужно удалить обработчик событий при первом запуске:

var input = document.querySelector("#inputId");
input.addEventListener('input', yourFunc);

function yourFunc(e) {
  alert("changed");
  this.removeEventListener('input', yourFunc);
}

Обратите внимание на использование addEventListener() и removeEventListener() вместо устаревшего oninput свойства.

Поскольку вы отметили jQuery в вопросе, вы также можете добиться этого таким же образом, используя one():

$('#inputId').one('input', function() {
  alert('changed');
});

Answer 3

Просто удалите функцию при вызове

let input = document.querySelector("#inputId");
input.oninput = function (e) {
                    alert("changed");
                    input.oninput = undefined;
                }

<input id="inputId">

Answer 4

Звучит так, как будто вы хотите привязаться к событию onchange: оно запускается, когда входное значение «завершается» пользователем, например, когда он / она размывает поле:

var input = document.querySelector("#inputId");
input.addEventListener('change', (e) => console.log('changed', e.target.value));

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