— ввод только цифр
Опубликовано: 22.08.2018
Строка поиска <input type="number">
name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit, а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled. readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step step=20 step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step, то есть делится на него без остатка. Пример разрешённых значений value при step="20": …, -40, -20, 0, 20, 40, …. По умолчанию равен 1. То есть <input type="number"/> покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any. min минимально возможное значение value, необходимое для отправки формы max максимально возможное значение value, необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа <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: <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)); } </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>