Строка поиска <input type="number">
|
имя ключа параметра |
|
|
|
заблокировано изменение пользователем |
|
заблокированы доступ, изменение пользователем и передача данных текущего параметра |
|
поле не может быть пустым |
|
|
|
|
|
|
|
подсказка-заглушка |
|
|
|
автозаполнение. Можно его отключить или сделать более конкретизированным. |
|
список рекомендованных значений |
|
|
<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,
#pyat::-webkit-outer-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.
value (строка) =""; valueAsNumber (число) ="";Запретить ввод букв
<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>Разделение цифр пробелом
Наберите любое многозначное число
<input oninput="this.nextElementSibling.innerHTML = new Intl.NumberFormat('ru').format(this.valueAsNumber)" type="number">
<output> </output>