Атрибут maxlength тега <input>
Описание
Атрибут maxlength определяет максимальное количество символов, которое можно ввести в текстовое поле <input>. Применяется к типам: text, search, url, tel, email, password и textarea.
<!-- Ограничение длины для текстового поля -->
<label for="username">Имя пользователя (макс. 20 символов):</label>
<input type="text" id="username" name="username" maxlength="20">
<!-- Ограничение для поля пароля -->
<label for="pass">Пароль (макс. 30 символов):</label>
<input type="password" id="pass" name="pass" maxlength="30">
Поддерживаемые типы input:
| Тип | Пример | Типичное применение |
|---|---|---|
| text | maxlength="50" |
Имена, названия, короткий текст |
| search | maxlength="100" |
Поисковые запросы |
| url | maxlength="200" |
Веб-адреса |
| tel | maxlength="15" |
Телефонные номера |
maxlength="254" |
Email-адреса | |
| password | maxlength="32" |
Пароли |
| textarea | maxlength="500" |
Комментарии, сообщения |
Пример с индикатором остатка символов:
<label for="tweet">Твит (осталось <span id="counter">280</span> символов):</label>
<textarea id="tweet" name="tweet" maxlength="280"></textarea>
<script>
const textarea = document.getElementById('tweet');
const counter = document.getElementById('counter');
textarea.addEventListener('input', function() {
const remaining = 280 - this.value.length;
counter.textContent = remaining;
counter.style.color = remaining < 20 ? 'red' : '';
});
</script>
Рекомендации:
- Используйте разумные ограничения, соответствующие данным
- Для важных полей добавьте визуальный индикатор оставшихся символов
- Сочетайте с серверной проверкой длины
- Для текстовых областей учитывайте переносы строк (2 символа)
Ограничения и особенности:
- Не учитывает пробелы в начале и конце (trim)
- Для сложных сценариев (например, подсчёт слов) нужен JavaScript
- В мобильных устройствах может не показывать предупреждение
- Не ограничивает вставку через Ctrl+V (но обрезает по maxlength)
Пример с динамическим ограничением:
<label>Тип сообщения:</label>
<select id="msgType">
<option value="short">Короткое (50 символов)</option>
<option value="long">Длинное (500 символов)</option>
</select>
<textarea id="message" name="message"></textarea>
<script>
document.getElementById('msgType').addEventListener('change', function() {
const max = this.value === 'short' ? 50 : 500;
document.getElementById('message').maxLength = max;
});
</script>
Примечание: Хотя maxlength обеспечивает базовую защиту от переполнения полей, для профессиональных решений рекомендуется дополнительная JavaScript-валидация, особенно при работе с многострочным текстом или специальными символами.