Ограничение длины ввода в textarea с JavaScript, без jQuery

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

Для ограничения количества символов, которое можно ввести в поле textarea, можно воспользоваться атрибутом maxlength и событием input. Посмотрим на пример обработчика этого события:

Скопировать код

// Ищем элемент textarea в DOM
const textarea = document.querySelector('textarea');
// Определяем обработчик события "input"
textarea.addEventListener('input', () => {
  // Обрезаем текст, если его длина превышает максимально допустимую
  textarea.value = textarea.value.slice(0, 100);
});

Этот обработчик будет отслеживать любые изменения в поле и автоматически обрезать текст до указанной длины, если это необходимо.

Кинга Идем в IT: пошаговый план для смены профессии

Глубокое погружение

Бесшовный пользовательский интерфейс с динамическим содержимым

В современной веб-разработке, где контент может подгружаться динамически, делегирование событий – лучший вариант:

Скопировать код

// Отслеживаем события на уровне всего документа
document.addEventListener('input', (event) => {
  if (event.target.tagName === 'TEXTAREA' && event.target.maxLength > 0) {
    // Обрезаем текст до допустимой длины
    event.target.value = event.target.value.slice(0, event.target.maxLength);
  }
});

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

Реагирование на вставку текста

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

Скопировать код

textarea.addEventListener('paste', (event) => {
  // Даем JS время для обработки вставленного текста
  setTimeout(() => {
    // Обрезаем лишний текст
    textarea.value = textarea.value.slice(0, textarea.maxLength);
  }, 0);
});

Здесь setTimeout обеспечивает корректный порядок операций: сначала вставка текста, потом его обрезка.

Поддержка старых браузеров

Если браузер не поддерживает атрибут maxlength, можно использовать следующий подход:

Скопировать код

window.onload = function() {
  var textareas = document.getElementsByTagName('TEXTAREA');
  for (var i = 0; i < textareas.length; i++) {
    if (textareas[i].getAttribute('maxlength')) {
      textareas[i].onkeyup = textareas[i].onblur = enforceMaxLength;
    }
  }

  function enforceMaxLength(event) {
    var target = event.target;
    var maxLength = parseInt(target.getAttribute('maxlength'));
    if (target.value.length > maxLength) {
      // Обрезаем текст и информируем пользователя
      target.value = target.value.substring(0, maxLength);
      alert('Превышен лимит символов!');
    }
  }
};

Это решить проблему даже для устаревших версий браузеров.

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

Возьмем, к примеру, элемент "текстовый сад" с ограничением количества символов:

HTML

Скопировать код

<textArea id="hedge" maxlength="10"></textArea>

JavaScript здесь работает как садовник, ухаживающий за этим "садом":

Скопировать код

const garden = document.getElementById('hedge');
garden.addEventListener('input', () => {
  if (hedge.value.length > 10) {
    garden.value = garden.value.substring(0, 10); // Подстригаем до допустимого размера!
  }
});

Текст в textArea ограничен десятью символами, и он всегда будет выглядеть аккуратно.

Еще более тонкий контроль над вводом

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

Скопировать код

textarea.addEventListener('keydown', (event) => {
  // Блокируем ввод дополнительных символов при достижении лимита
  if (textarea.value.length >= textarea.maxLength && ![8, 46].includes(event.keyCode) && !event.metaKey && !event.ctrlKey) {
    event.preventDefault();
  }
});

Работа с jQuery

Если предпочитаете использовать jQuery, задача упрощается:

Скопировать код

$('textarea[maxlength]').on('input', function() {
  // jQuery упрощает манипулирование DOM
  var maxLength = parseInt($(this).attr('maxlength'));
  $(this).val($(this).val().substring(0, maxLength));
});

Здесь не важно, динамически добавлены поля или нет.

Уважительная обратная связь с пользователем

Важно всегда предоставлять обратную связь пользователю и делать это деликатно:

Скопировать код

textarea.onblur = function() {
  if (this.value.length > this.maxLength) {
    // Подсвечиваем поле с ошибкой
    this.classList.add('error');
    // Легко извиняемся за неудобства
    alert('Извините, текст слишком длинный!');
  }
};

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

<textarea>: Элемент Textarea – HTML: HyperText Markup Language | MDN — подробные сведения о <textarea> и атрибуте maxlength.
HTML textarea maxlength Attribute — инструкция по использованию атрибута maxlength в <textarea>.
Set maxlength in Html Textarea – Stack Overflow — дискуссия об ограничении максимальной длины в <textarea>.
Form properties and methods — подробное объяснение работы с элементами форм, включая ограничение символов в <textarea>.
Difficulty with jQuery and input keydown event – Stack Overflow — обсуждение заказывающих поведения ограничения ввода символов в полях форм.
HTML 5 <textarea> Tag — удобное руководство по использованию <textarea>, включая все атрибуты в HTML5.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой атрибут используется для ограничения количества символов в поле textarea?

1 / 5

Свежие материалы

Как установить и настроить Swift на Linux

6 сентября 2024

Как выбрать инструменты для тестирования сайтов

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024