Как ограничить количество символов в input html

Атрибут maxlength

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

Атрибут maxlength может добавляться только к полю формы, у которого type имеет одно из значений: text , password , search , url , tel , email .

Синтаксис

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

Пример

Браузеры

3

12

1

4

1

1

3

1

6

1

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Атрибут maxlength

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

Синтаксис

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

HTML5 IE Cr Op Sa Fx

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Как ограничить количество символов в 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 вы не увидите

Как ограничить количество вводимых символов в input включая смайлики?

Пишем мобильное приложение на ionic. Появилась такая проблема, что есть валидация для input по количеству символов. Когда вводишь обычные символы, то все норм, но если вводить смайлики(это я именно уже про тест в мобильном приложении), то получается что смайлики при вводе считаются за 1 символ, а на самом деле у всех смайликов разная длинна(из-за кодировки). И получается когда из бэкэнда приходит эта валидация, то инпут становится не валидным. Я нашел способ преобразовать строку в массив, но как мне добиться такого результата как при maxlength(когда ставишь туда значение например 20, то ты вводишь 20 символов, а потом инпут не дизейблится, а все еще активный, но вводить больше нельзя)?

• Вопрос задан более трёх лет назад
• 736 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 1

Добрый день.
Первое, что бы я сделал — это проверил, что смайлик не попал в пограничное состояние максимума (типа двоеточие это 20-й символ, а D это уже 21-й). Такие случаи стоит обработать отдельно.
Второе: проверяете длину строки на максимально допустимое количество символов. Если больше, то откусываете от значения первые 20 символов и скармливаете VALUE инпута.
PS. Непосредственно на ионике не пробовал.

Ответ написан более трёх лет назад
Нравится 1 4 комментария
AntonVirovets @AntonVirovets Автор вопроса

Я нашел такое решение как, сначала брать value инпута, и преобразовать в массив таким образом, что бы каждый символ или смайлик были отдельным значением массива при каждом keypress. Потом преобразовал массив в единую строку и уже запустил проверку по длине строки. Если подходит, то разрешал дальше набирать текст, если нет, то запрещал) вроде работает, проверил) что-то типа такого вышло

titleValidation(input)