0

Подскажите как можно отслеживать изменение содержимого элемента <input>?

Вот такая конструкция не срабатывает:

$('body').on("change", 'input[type=text]', function (event) {
    console.log('change');
}

Изменение содержимого элемента может выполняться 2 способами:

  1. нажатием на кнопку (тогда я сам формирую содержимое);
  2. пользователь вводит в поле текст сам.

2 ответа 2

1

jquery: отслеживание изменения содержимого элемента <input>

Вот так можно отслеживать:

//
$('body').on("keyup", 'input[type=text]', function(event) {
  console.log('keyup', $(this).val());
})
//----------------------------------------------------------------
// Событие на клик 
$('button').on('click', function() {
  let inpt = $('input[type=text]');

  inpt.val(function(index, val) {
    // Вот здесь можно менять значение INPUT
    return val.toLowerCase(); // Перевод в нижний регистр
  });
  console.log(inpt.val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="">
<button>Make your change</button>

1
  • ответ дан после публикации моего ответа и это просто дупликат с некоторыми изменениями
    – Roman C
    1 авг 2018 в 12:50
0

function checkChange() {
  if (this.oldValue != this.value) {
    console.log('change', this.value);
  }
  this.oldValue = this.value;
}

$("input[type=text]").each(function() {
  this.oldValue = this.value;
});
setInterval(function() {
  $("input[type=text]").each(function() {
    checkChange.call(this);
  });
}, 200);

// user input - keystrokes, Ctrl keys, context menu
$('body').on("input", 'input[type=text]', function(event) {
  checkChange.call(this);
});

// changes through script
$("button").click(function() {
  $("input").val($("input").val() + " w");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<button>Click to change</button>

1
  • Igor, этот код работает когда вручную любым способом вводится текст в поле input, но когда программно в нем меняется значение, то он не реагирует :(
    – Zhihar
    1 авг 2018 в 14:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.