Практика: ограничение textarea с честной подсказкой
Ограничение длины текста нужно объяснять до отправки формы. Упражнение показывает maxlength и видимую подсказку, не обещая автоматический счётчик, которого в разметке нет.
Назначение
Ограничение длины текста нужно объяснять до отправки формы. Упражнение показывает maxlength и видимую подсказку, не обещая автоматический счётчик, которого в разметке нет.
Как это работает
Textarea получает подпись и aria-describedby. Maxlength ограничивает длину по кодовым единицам UTF-16, поэтому число не всегда совпадает с количеством воспринимаемых символов, особенно для эмодзи.
Пример
<label for="short-note">Короткая учебная заметка</label><textarea id="short-note" name="note" rows="4" maxlength="120" aria-describedby="short-note-help"></textarea><p id="short-note-help">Лимит поля — 120 кодовых единиц UTF-16. Некоторые символы, например эмодзи, занимают больше одной.</p>
<style>textarea{box-sizing:border-box;display:block;width:100%;max-width:30rem;font:inherit;padding:.7rem}</style>Что должно получиться
Поле сообщает ограничение заранее и позволяет вводить многострочный текст. В примере нет динамического остатка длины; он должен рассчитываться отдельно по тем же правилам, что и выбранное ограничение.
Граница применения и частая ошибка
Если продукт обещает лимит в пользовательских символах, одного maxlength может быть недостаточно. Нужна согласованная проверка графем на клиенте и сервере. Не рассчитывайте только на блокировку ввода браузером: данные можно отправить другим способом.
Самостоятельная проверка
Проверьте латиницу, кириллицу и эмодзи, затем вставку длинного текста. Сравните value.length с Intl.Segmenter. Выберите понятную пользователю формулировку лимита для реального интерфейса.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.