Обработка изменения значения элементов input, checkbox, radio, textarea с помощью метода change() в jQuery

Метод change() позволяет отловить изменение, которое пользователь производит в полях формы типа input, checkbox, radio, textarea, select. Использование метода весьма простое. Чаще всего можно встретить две основные вариации синтаксиса:

1. Использование метода с параметром:

1	.change( handler )

где handler — обработчик, который вызывается при наступлении события change

2. Вызов метод без параметра:

.change()

Второй вариант позволяет искусственно создать событие change, в результате которого сработает обработчик, «навешанный» ранее на данный объект.

Рассмотрим простой пример.

1
2
3

<form>
  <input class="test" type="text" value="base value">
</form>

Вешаем обработчик на элемент input:

1
2
3

$( ".test" ).change(function() {
  alert( "Значение изменилось!" );
});

В этом примере мы создали простую форму с одним текстовым полем. Если изменить текущее значение «base value» на какое-то другое и убрать фокус с этого поля, то сработает наш alert с выводом сообщения.

Для полей типа textarea и input событие change наступает после изменения значения поля и потери фокусом данным полем. Для полей типа checkbox, radio — это событие наступает сразу же, как только пользователь кликает по новому значению.

Мы можем запустить обработку события, не дожидаясь его наступления. Это можно сделать, если запустить метод change() без каких-либо параметров:

1	$( ".test" ).change();

Если значения поля меняется скриптом, то запуска события не произойдет.

Альтернатива данному методу следующая конструкция:

1
2
3

$( ".test" ).on("change", function() {
  alert( "Значение изменилось!" );
});

Другие посты

Категория: jQuery

Оставить комментарий