Строка поиска <input type="number">
- имя ключа параметра
- значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку
submit
, а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибутыreadonly
иdisabled
. - заблокировано изменение пользователем
- заблокированы доступ, изменение пользователем и передача данных текущего параметра
- поле не может быть пустым
- шаг изменения, который может быть положительным целым или дробным числом. Значение
value
кратно значениюstep
, то есть делится на него без остатка. Пример разрешённых значенийvalue
приstep="20"
: …, -40, -20, 0, 20, 40, …. По умолчанию равен1
. То есть<input type="number"/>
покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоитьany
. - минимально возможное значение
value
, необходимое для отправки формы - максимально возможное значение
value
, необходимое для отправки формы - подсказка-заглушка
- всплывающая подсказка при наведении курсора мышки
- автозаполнение. Можно его отключить или сделать более конкретизированным.
- список рекомендованных значений
- фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
<form> <input type="number"> <input type="submit"> </form>
Поле <input type="number">
не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.
Количество товара
- увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
- сообщение об ошибки при вводе букв и дробных чисел,
- минимальное значение 1.
<form><input type="number" min="1" value="1"> шт</form>
Чётные положительные целые числа
<form><input type="number" step="2" min="2"></form>
Нечётные положительные целые числа
<form><input type="number" step="2" min="1"></form>
Круглые числа
<form><input type="number" step="10"></form>
Десятичная дробь с плавающей запятой
<form><input type="number" step="any"></form>
Денежный формат цены: «рубли,копейки» с двумя знаками после запятой
<form><input type="number" step="0.01" min="0" placeholder="0,00"> ₽</form>
Ограничить количество символов в поле до 5
<form><input type="number" min="-9999" max="99999"></form>
Уменьшить длину <input type=number>
Атрибуты minlength
, maxlength
и size
не работают.
- Необходимое количество символов в поле определяется атрибутами
min
,max
иstep
:<!-- Достаточно выделить место на 6 символов --> <input type="number" min="0" max="100" step="0.01"/>
- Указать ширину в CSS (свойство
width
):<style> #dva { width: 6em; } </style> <input type="number" min="0" max="100" step="any" id="dva"/>
Стрелки у <input type=number>
Чтобы стрелочки были изначально, а не только при :hover
и :focus
в Chrome
<style> #pyat::-webkit-inner-spin-button { opacity: 1; } </style> <input type="number" id="pyat"/>
Убрать стрелки
<style> .raz { -moz-appearance: textfield; } .raz::-webkit-inner-spin-button { display: none; } </style> <input type="number" class="raz"/>
Стилизация стрелок «вверх»/«вниз» CSS
<style> #raz { position: relative; display: inline-block; } #raz input { font-size: 1em; -moz-appearance: textfield; } #raz input::-webkit-inner-spin-button { display: none; } #raz span { position: absolute; } @supports (clip-path: polygon(50% 30%, 10% 90%, 90% 90%)) { #raz input { padding-right: 1em; } #raz span { right: 0; width: 1em; height: 50%; background: rgb(70,70,70); cursor: pointer; } #raz span:hover { background: red; } #raz span:nth-of-type(1) { top: 0; clip-path: polygon(50% 30%, 10% 90%, 90% 90%); } #raz span:nth-of-type(2) { bottom: 0; clip-path: polygon(50% 70%, 10% 10%, 90% 10%); } } </style> <span id="raz"> <input type="number" value="0"> <span onclick="this.previousElementSibling.stepUp()"></span> <span onclick="this.previousElementSibling.previousElementSibling.stepDown()"></span> </span>
Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования
<style> .raz { all: unset; -moz-appearance: textfield; width: 3em; text-align: center; } .raz::-webkit-inner-spin-button { display: none; } </style> <button type="button" onclick="this.nextElementSibling.stepDown()">-</button> <input type="number" min="0" max="100" value="1" readonly class="raz"> <button type="button" onclick="this.previousElementSibling.stepUp()">+</button>
Вместо <input type="number">
использовать <input type="text">
Виртуальная клавиатура с дробно-числовым вводом
Атрибут inputmode
плохо поддерживается браузерами.
<input inputmode="decimal">
На IOS (iPhone) если атрибут pattern
имеет значение [0-9]*
или \d*
, то на мобильном телефоне будет дана цифровая клавиатура.
Для отправки формы, поле должно содержать только цифры
<form><input inputmode="decimal" pattern="-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?"></form>
Функционал с JavaScript
При наборе не числа value
возвратит пустое значение. Браузер может позволить/вынудить пользователя набрать число с запятой «20,5», но value
примет значение с точкой «20.5», искл., IE.
Запретить ввод букв
<input type="number" id="check" step="any"/> <script> document.getElementById('check').onkeydown = function (e) { return !(/^[А-Яа-яA-Za-z ]$/.test(e.key)); // IE > 9 } </script>
Только одна точка или одна запятая
<input type="number" step="any" id="shest2"/> <script> document.getElementById('shest2').onkeydown = function (e) { if (e.currentTarget.value.indexOf(".") != '-1' || e.currentTarget.value.indexOf(",") != '-1') { return !(/[.,]/.test(e.key)); } } </script>
Ограничить ввод двумя знаками после запятой
Цифры, вносимые после 2-го символа после запятой, сразу обрезаются, дабы не совершать лишних телодвижений.
<input type="number" oninput="up(this)" step="0.01"/> <script> function up(e) { if (e.value.indexOf(".") != '-1') { e.value=e.value.substring(0, e.value.indexOf(".") + 3); } } </script>
Обрезать последний лишний символ
<input type="number" step="any" id="shest1"/> <script> document.getElementById('shest1').oninput = function () { if (this.value.length > 7) this.value = this.value.substr(0, 7); // в поле можно ввести только 7 символов } </script>