Как проверить ввод при его изменении функцией?

Question

Я не могу проверить свой ввод, когда функция меняет значение ввода. Я пробовал это: $(selectElement).on("change keyup paste click", ()=>{ //Do something }), этот метод работает только тогда, когда пользователь вставляет что-то во входные данные, но когда функция меняет значение, это не работает! У тебя есть идеи?

Answer 1

Этот код jQuery ловит немедленные изменения любого элемента и должен работать во всех браузерах:

 $('.selectElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       console.log('change!');
     }
   });
 });

Answer 2

Вы можете сказать кнопке, чтобы она вызывала событие изменения в поле <input type="text">, выполнив вызов jQuery.fn.trigger с событием, предназначенным для прослушивания.

$('#input-txt').on('change keyup paste click', (e) => {
  console.log('Text changed!');
});

$('#click-btn').on('click', e => $('#input-txt').trigger('change'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input-txt" type="text" value="Change me!" />
<button id="click-btn">Click me!</button>

То же самое, используя чистый JavaScript (ES6).

addEventListeners('#input-txt', 'change keyup paste click', e => {
  console.log('Text changed!');
});

addEventListener('#click-btn', 'click', e => {
  triggerEvent('#input-txt', 'change');
});

function addEventListener(el, eventName, fn) {
  el = typeof el === 'string' ? document.querySelector(el) : el;
  el.addEventListener(eventName, fn);
}
function addEventListeners(el, events, fn) {
  el = typeof el === 'string' ? document.querySelector(el) : el;
  events.trim().split(/\s+/).forEach(eventName => addEventListener(el, eventName, fn));
}
function triggerEvent(el, eventName) {
  el = typeof el === 'string' ? document.querySelector(el) : el;
  var event = document.createEvent('HTMLEvents');
  event.initEvent(eventName, true, false);
  el.dispatchEvent(event);
}

<input id="input-txt" type="text" value="Change me!" />
<button id="click-btn">Click me!</button>