КодSEOБлогИное

Поле для ввода чисел: <input type=number>

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Строка поиска <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. увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
  2. сообщение об ошибки при вводе букв и дробных чисел,
  3. минимальное значение 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 не работают.

  1. Необходимое количество символов в поле определяется атрибутами min, max и step:
    <!-- Достаточно выделить место на 6 символов -->
    <input type="number" min="0" max="100" step="0.01"/>
  2. Указать ширину в 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.

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 вводят 100000, а он выдает 100 000? NMitraЯ не видела толкового решения, чтобы в самой строке input number классы отделялись символом, так как value не может содержать пробел. <input oninput="this.nextElementSibling.innerHTML = new Intl.NumberFormat('ru').format(this.valueAsNumber)" type="number"> <output></output>
Все комментарии