Отслеживание изменений в textarea jQuery: все способы

Быстрый ответ

Если нужно отследить изменения в поле textarea, вы можете использовать функцию .on() из jQuery для события input. Это событие фиксирует все виды ввода пользователя: от ввода текста до его вырезания и вставки.

$('textarea').on('input', function() {
  console.log('Текст изменён пользователем'); 
});

Долгосрочная стратегия: опыт пользователя и универсальная поддержка

Реактивное управление видимостью кнопок

Вы можете управлять отображением элементов, таких как кнопки, в зависимости от наличия текста в textarea. Вот пример такой логики:

$('#myButton').hide();  // Сначала скрываем кнопку

$('textarea').on('input', function() {
  // Если в текстовом поле что-то введено, то показываем кнопку
  // Когда поле пустое — скрываем её
  $('#myButton').css('display', this.value ? 'inline-block' : 'none');
});

Подробнее об этом расскажет наш спикер на видео

Отложенное включение/отключение кнопки

Если требуется быстро включать или выключать кнопку, делайте это в момент ввода текста, изменяя свойство disabled кнопки:

$('textarea').on('input', function() {
  $('#submit-button').prop('disabled', !$(this).val());
});

Чистый JavaScript для обеспечения универсальной поддержки

Если вы предпочитаете работать без jQuery, то аналогичные операции можно выполнять на чистом JavaScript:

var textarea = document.getElementById('myTextarea');
var button = document.getElementById('myButton');

textarea.addEventListener('input', function() {
  button.style.display = this.value ? 'inline-block' : 'none';
});

Ключ к успеху

Плагин textchange jQuery для расширенной совместимости

Для более широкой поддержки браузеров плагин textchange предоставляет собственное событие textchange. Так вы можете сосредоточиться на улучшении вашего сайта.

$('textarea').on('textchange', function() {
  console.log('Текст изменён, это мы не пропустили!');
});

Дебаунсинг для оптимизации производительности

Не позволяйте частому вводу текста перегружать вашу систему. Улучшите производительность, используя дебаунсинг.

function debounce(func, wait) {
  let timeout;
  clearTimeout(timeout);
  timeout = setTimeout(func, wait);
}

$('textarea').on('input', debounce(function() {
  console.log('Текст обновлён, но система не перегружена');
}, 250));

Это позволяет отложить срабатывание console.log на определенный промежуток времени – 250 миллисекунд.

Визуализация

Событие change можно рассматривать как уведомление об изменении содержимого:

🚪🔔 – Вообразите, что `textarea` — это дверь.

Событие срабатывает каждый раз, когда содержимое меняется – как звонок у двери:

$('textarea').on('change', function() {
    alert('Содержимое изменилось!');
});

До: 🚪🔇 (Тихая дверь)
После: 🚪🔔 (Уведомляем об изменении!)

**Событие `change`**: 🎶 *Звенит звонок!*

Событие change само по себе не покрывает все случаи (например, при вставке текста), поэтому лучше использовать его вместе с input.

$('textarea').on('input change', function() {
    // Ваши данные в безопасности
});

Интерактивная обратная связь

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

$('textarea').on('input', function() {
  var message = $(this).val().length < 20 ? 
                'Добавьте ещё текста...' : 'Отлично, можно публиковать!';
  $('#encouragement').text(message).show();
});

Полезные материалы

Более подробную информацию вы можете найти в официальной документации здесь и здесь.