Атрибут maxlength
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Атрибут maxlength может добавляться только к полю формы, у которого type имеет одно из значений: text , password , search , url , tel , email .
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
Пример
Браузеры
| 3 | 12 | 1 | 4 | 1 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Как ограничить количество символов в input number в пределах от 0 до 999.999?
По сути, max и min это валидаторы. Но они никак не ограничивают ввод с клавиатуры и простой копи-паст.
Воспользуйтесь простым обработчиком события и через JS установите минимальное/максимальное значение при выходе за лимиты.
const inputs = document.querySelectorAll('input[type=number]'); Array.from(inputs).forEach(input => < const min = +input.min; const max = +input.max; input.addEventListener('input', (e) => < const value = +input.value; if (value >max) < input.value = max >else if (value < min) < input.value = min >> >)); Отслеживать
ответ дан 12 мая 2020 в 15:09
1,833 1 1 золотой знак 7 7 серебряных знаков 9 9 бронзовых знаков
Мне еще нужно ограничить число до тысячных. К примеру нужно что бы пользователь мог ввести 5.999, 66.111, 110,1. Не подскажите как сделать это?
12 мая 2020 в 15:15
можно использовать Math.round на значение. Math.round(value * 1000) / 1000
12 мая 2020 в 15:18
Спасибо. Еще бы один моментик подсказали и ситуация будет спасена. Есть ли возможность разделить дробную и целую часть точкой, а не запятой?
12 мая 2020 в 15:52
Когда вы вводите вручную, input понимает и . и , в качестве разделителя. Если пользуетесь button-controls для изменения, значение будет выдавать , . Если это прям кровь из носу точку надо, то лучше использовать type=»text» парсить по разделителю , типа input.value = » + value.split(‘,’).join(‘.’) . В этом случае, валидаторы min/max — это просто болванки, которые работать не будут. Ну и button-controls вы не увидите
Атрибуты minlength и maxlength
Как задать минимальное и максимальное количество символов, которое принимает поле?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Юрий Четвериков ,
- Татьяна Фокина
Контрибьюторы:
Обновлено 21 ноября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Атрибуты minlength и maxlength устанавливают минимальное и максимальное количество символов, которые можно ввести в поля или .
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере в можно ввести минимум 4 символа и максимум 8, а в — минимум 50 и максимум 1000.
input minlength="4" maxlength="8"> textarea minlength="50" maxlength="1000">
Теперь создадим поле с паролем и ограничим количество допустимых символов:
Введите пароль (от 8 до 16 символов): type="password" name="password" minlength="8" maxlength="16" required>label for="password"> Введите пароль (от 8 до 16 символов): label> input type="password" id="password" name="password" minlength="8" maxlength="16" required >
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Значения для minlength и maxlength — целые числа от 0 и выше. К примеру, 0 , 14 или 1000 . Если не указать значение или задать его неверно, у поля не будет ограничений по длине. Также значение maxlength не может быть меньше значения minlength . Поле всегда будет заполнено неправильно, если максимальное значение меньше минимального.
Браузеры используют кодировку UTF-16 для расчёта длины поля. Это значит, что длина равна количеству символов в случае букв, чисел и знаков. Например, если задали minlength = "3" , то поле с введёнными abc и 123 соответствуют минимальному ограничению по символам.
minlength и maxlength часто используют вместе с другим атрибутом required , который делает поле обязательным.
Валидация
Скопировать ссылку "Валидация" Скопировано
В JavaScript есть специальный интерфейс Validity State , который даёт доступ к проверке полей. С помощью свойств too Long и too Short можно проверять длину поля с атрибутами minlength и maxlength . Оба свойства возвращают true , если пользователь ввёл слишком много или слишком мало символов, и false , когда введённые данные правильной длины. Форму лучше валидировать после нажатия на кнопку для отправки данных.
Странности с
Скопировать ссылку "Странности с input type="number"" Скопировано
Когда задаёте ограничения по длине полю с типом number , атрибуты minlength и maxlength не ограничивают минимальное и максимальное количество символов, которое можно ввести с клавиатуры.
Попробуйте ввести в этой демке больше, чем 3 цифры.
Выберите количество (максимум 999): type="number" min="1" max="999" maxlength="3" >label for="items"> Выберите количество (максимум 999): label> input type="number" min="1" max="999" maxlength="3" id="items" >
Чтобы обойти странность, используйте JavaScript или регулярные выражения. К примеру, в это поле можем ввести только 3 символа благодаря обработке события on Key Press . Когда попытаетесь ввести больше символов, скрипт просто не даст это сделать.
Выберите количество (максимум 999): type="number" pattern="\d+" min="1" max="999" onKeyPress="if(this.value.length === 3) return false">label for="items"> Выберите количество (максимум 999): label> input type="number" id="items" pattern="\d+" min="1" max="999" onKeyPress="if(this.value.length === 3) return false" >
Стилизация
Скопировать ссылку "Стилизация" Скопировано
Поля с неправильными данными можно стилизовать через псевдоклассы :invalid или :user - invalid для всех полей или :out - of - range для полей с type = "number" .
Добавляйте к неправильно заполненным полям не только цветную обводку и заливку, но и иконку, а также текстовое описание ошибки.
К полю, стилизованному через :invalid , стили применятся в пустом состоянии и в состоянии, когда в него ввели неправильное количество символов.
input:invalid border-color: #2E9AFF; background-color: rgb(46, 154, 255, 0.1); outline: none;>input:invalid border-color: #2E9AFF; background-color: rgb(46, 154, 255, 0.1); outline: none; >
Стили из :user - invalid применятся к полю только тогда, когда пользователь ввёл неверное количество символов и при этом начал взаимодействовать с другими элементами на странице.
input:user-invalid border-color: #2E9AFF; background-color: rgb(46 154 255 / 0.1); outline: none;>input:user-invalid border-color: #2E9AFF; background-color: rgb(46 154 255 / 0.1); outline: none; >
Атрибут minlength
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Пример
Браузеры
| 17 | 40 | 27 | 10.1 | 51 |
| 40 | 51 | 27 | 10.3 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.