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
    Commented 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
    Commented 1 авг. 2018 в 14:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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