input type=number | Поле для ввода чисел | HTML

input type=number [w3.org]
АтрибутОписание и пример
Поле предназначено для ввода положительных (пример, 20) или отрицательных (пример, -20) чисел. Дробная часть отделяется и точкой (пример, 3.1415926535), и запятой (пример, 3,1415926535). Больше не нужен JavaScript, не нужно думать о плавающей запятой (она же плавающая точка). Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit.
<input type="number"/>
Шаг изменения числа, когда значение input кратно значению step, то есть делится на него без остатка. Пример разрешённых значений input при step="20": …, -40, -20, 0, 20, 40 и т.д. step должен быть больше нуля. Может быть как целым, так и дробным. По умолчанию равен 1. То есть <input type="number"/> покажет ошибку, если ввести дробное число. Для того, чтобы убрать ограничения, нужно использовать значение any.
<input type="number" step="20"/>
<input type="number" step="any"/>
Значение поля, которое может содержать: цифры "0-9", один плюс "+" или минус "-", одну точку ".", один символ "e" или "E". Когда человек вводит в поле "20,5", то value="20.5".
<input type="number" value="20"/>
Минимальное значение. Поле позволит ввести число меньше, чем указано в атрибуте min, но не даст отправить форму по нажатию на кнопку submit. Стрелки не уменьшают значение ниже минимального.
<input type="number" min="20"/>
Максимальное значение. Поле позволит ввести число больше, чем указано в атрибуте max, но не даст отправить форму по нажатию на кнопку submit. Стрелки не увеличивают значение выше максимального.
<input type="number" max="20"/>
id тега datalist, в котором предложены подготовленные рекомендательные варианты (необязательные), которые появляются по мере совпадения символов при вводе в поле input.
<form> <input list="tri" type="number"> <datalist id="tri"> <option>20</option> <option>2000</option> <option>40</option> <option>400</option> <option>50</option> <option>5000</option> </datalist> </form>
Поле обязательно должно быть заполнено. Если оно остаётся пустым, то форма отправлена не будет, а браузер выведет сообщение об ошибке.
<input type="number" required/>
Текст-подсказка, которая пропадёт, когда пользователь введёт первый символ. Если нужно убрать подсказку при нажатии на элементе читаем тут.
Возраст: <input type="number" placeholder="Количество полных лет"/>Возраст:
При загрузки элемент получает фокус, веб-страница будет опущена к нему.
<input type="number" autofocus/>
Включает или отключает автозаполнение. Может иметь значение on или off.
<input type="number" autocomplete="on" x-autocompletetype="birthday-year"/>
Поле не может изменяться пользователями, но может получить фокус, его содержимое можно выделять и копировать.
<input type="number" readonly value="20"/>
Поле не может изменяться пользователями, не может получить фокус, его содержимое нельзя выделить, его значение не передаётся на сервер.
<input type="number" disabled value="20"/>
P.S. Ох, как мне нужно много форм изменить из-за изначально неправильного понимания step.

Уменьшить длину input type=number, когда не работает атрибут size

  1. Если на поле наложены ограничения. Для <input type="number" min="0" max="100" step="0.01"/> достаточно выделить место на 6 символов:
  2. Если указана ширина в CSS (свойство width):
    <style>
    #dva {
      width: 6em;
    }
    </style>
    
    <input type="number" min="0" max="100" step="any" id="dva"/>

Ограничить ввод двумя знаками после запятой

<input type="number" step="0.01"/> даёт нужный результат. Можно добавить JavaScript, чтобы цифры, вносимые после 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 JS

<input type="number" id="shest2"/>

<script>
document.getElementById('shest2').onkeypress = function (e) {
  if (this.value.indexOf(".") != '-1' || this.value.indexOf(",") != '-1') { // позволяет ввести или одну точку, или одну запятую
    return !(/[.,]/.test(String.fromCharCode(e.charCode)));
  }
}
</script>

Обрезать последний символ JS

<input type="number" id="shest1"/>

<script>
document.getElementById('shest1').oninput = function () {
  if (this.value.length > 7) this.value = this.value.substr(0, 7); // в поле можно ввести только 7 символов
}
</script>

Запретить ввод букв в input JavaScript

Поддерживается IE с 9 версии.
<input type="number" id="check" step="any"/>

<script>
document.getElementById('check').onkeypress = function (e) {
  return !(/[А-Яа-яA-Za-z ]/.test(String.fromCharCode(e.charCode)));
}
</script>

Стрелки у input

Чтобы стрелочки в input были изначально, а не только при :hover и :focus в Хроме

<style>
#pyat::-webkit-inner-spin-button { 
  opacity: 1;
}
</style>

<input type="number" id="pyat"/>

Убрать стрелки из input

<style>
#shest { 
  -moz-appearance: textfield;
}
#shest::-webkit-inner-spin-button { 
  display: none;
}
</style>

<input type="number" id="shest"/>

Особенности отображения браузерами

На IOS (iPhone) если атрибут pattern имеет значение [0-9]* или \d*, то даже для заполнения <input type="text"> будет дана та же клавиатура, что при <input type="number">.

Атрибут inputmode определяет вид клавиатуры, но не поддерживается браузерами.

Символы . , - (точка или запятая для дробного числа и минус для отрицательного) присутствует не на всех клавиатурах мобильных браузеров, которые появляются при фокусе на <input type="number">.

Длинные числа могут округляться, что не подходит для 16 цифр пластиковой карты. Также тут не уместны стрелки увеличения/уменьшения числа.

Использованные материалы: «I Wanted to Type a Number»

в f t
наверх ↑

16 комментариев:

Анонимный
Здравствуйте а как делают отбивку для тысяч при заполнении формы, например в Input вводят 100000 а он выдает 100 000?
NMitra
На выходе знаю как сделать(регулярными выражениями проще всего), знаю как в input text, но для input number не видела решения.
NMitra
Я имею ввиду внутри input
Анонимный
Спасибо статья немного помогла, на сайте этажи.сом вот реализовано форме в ипотечного калькулятора, такая штука интересуюсь вот в целях обучения методам как оно работает..
Unknown
Как получить предыдущее значение в событии oninput
NMitra
parseFloat(this.value) - 1;
Вячеслав Беловол
NMitra смешно, но а все таки, есть ли способ...???
NMitra
Способ что сделать?
Марат Коротин
Спасибо большое. Убрал стрелки у поля ввода чисел: http://ledcl.ru/led-calc/led-calc.html
SkeLetOn
Спасибо за статью. Очень помогла, но хотелось бы узнать как сделать, чтобы в числе было всего 16 цифр и дальше было писать невозможно (помимо цифр после запятой и остальных знаков). Также я сделал, чтобы в input можно было вводить только цифры, запятые, точки, "e", "E", плюс, минус. А можно как-то сделать, чтобы можно было один раз ввести запятую или точку, "e"или "E", плюс и минус. Заранее спасибо)
SkeLetOn
И ещё с кое-чем нужна помощь. Есть два input type="number" и один input type="button" disabled, нужно чтобы когда и в первом input number, и во втором, с button спасался атрибут disabled
NMitra
"чтобы в числе было всего 16 цифр и дальше было писать невозможно" - дополнила статью
NMitra
"один раз ввести запятую или точку, "e"или "E", плюс и минус" - дополнила статью

Я не советую много функций вешать на keypress и input. На мобильных и планшетах начинает тормозить ввод символов в input, особенно при медленном соединении.

input type="number" при отправке формы покажет ошибку
NMitra
Комментарий 11 не поняла
Marina Voronova
добрый день.
подскажите пожалуйста, как Запретить ввод букв в input JavaScript на мобильном устройстве?
Приведенный код работает только а десктопном браузере.
Спасибо
NMitra
Добрый день. Когда нажимаешь на input type="number", на большинстве мобильных появляется клавиатура без букв. Можно с помощью onchange после заполнения поля убирать посредством регулярного выражения все набранные ранее буквы. Я не изучала детально события, которые срабатывают только на мобильных такие, как ontouchstart, возможно есть более удачное решение.