Как отловить любое событие изменения значения в input

Question

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

const nv = document.querySelector("input[name='nv']");
const button = document.querySelector("button.accept_modal");
nv.addEventListener("input", function(e) {
  var nvObj = {
    "nvAj": nv.value.toString()
  };
  console.log(e);
  $.ajax({
    url: "Cehst_nv",
    method: "post",
    dataType: "json",
    data: nvObj,
    error: function(message) {},
    success: function(data) {
      document.getElementById('checkNv').value = data;
      const checkNv = document.querySelector("input[name='checkNv']");
      if (nv.value !== checkNv.value) {
        $("#labelErr").text("Бла бла бла").css("display", "block");
        button.setAttribute("disabled", true);
      } else {
        $("#labelErr").css("display", "none");
        button.removeAttribute("disabled");
      }
    },
    beforeSend: function() {}
  });
});

Answer 1

Попробуй через потерю фокуса поля сделать, помимо input евента

И\или добавить focus mouse event'ы, вот тут все евенты, либо через таймер, что не есть гуд

$('#form > input').on('input', ({currentTarget})=>{
    $(currentTarget).css('background', 'green');    
});

$('#form > input').on('focusout', ({currentTarget})=>{
    $(currentTarget).css('background', 'red');    
});

$('#form > input').on('focusin', ({currentTarget})=>{
    $(currentTarget).css('background', 'blue');    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
    <input type="text" placeholder="text input">
    <input type="text" placeholder="password">
</form>

Answer 2

В далеком 2011 году писали , что Chrome и IE при автодополнении генерируют событие change, а Opera c Firefox - input. Правда, Опера уже не та.

В примере ниже Chrome у меня сгенерировал оба события.

const nv = document.querySelector("input[name='login']");
nv.addEventListener('change', monitorE);
nv.addEventListener('input', monitorE);
function monitorE(e) {
  console.log(e.type);
}

<input name="login" type="text" autocomplete="on" />

Для проверки можно использовать monitorEvents, как рекомендуют в ответе (работает в devtools)

БЛОГ НА HUSL

Как отловить любое событие изменения значения в input

Ответы (2 шт):