Вы можете привязать событие ввода к текстовому полю input
используя метод on()
, чтобы обнаруживать любые изменения в нем.
В следующем примере будет отображаться введенное значение, когда вы вводите что-то в поле ввода.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Detect Change in Input Field</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("input", function(){
// Распечатаем введенное значение в поле div
$("#result").text($(this).val());
});
});
</script>
</head>
<body>
<p><input type="text" placeholder="Type something..." id="myInput"></p>
<div id="result"></div>
</body>
</html>
Обратите внимание, что событие input
запускается при вводе с клавиатуры, перетаскивании мышью, автозаполнении и даже копировании и вставке. Но он не сработает, если вы вставите ту же строку или выберите и повторно введите один и тот же символ и т. д.
Кроме того, если вы используете здесь событие change
, оно не будет работать должным образом, поскольку в случае ввода текста событие change
срабатывает только тогда, когда элемент теряет фокус (т.е. onblur). Попробуйте приведенный выше пример, заменив строку input
на change
(строка № 8), и посмотрите, как это работает.