Chrome/HTML5: номер типа ввода не соответствует атрибуту max?

В Google Chrome (и, возможно, в других браузерах для веб-браузера) это ограничит стрелку вверх, начиная с 99, но не не позволяет пользователю вводить число выше 99. Даже onblur, недопустимое значение не удаляется/не заменяется или даже предупреждается о том, что значение недействительно.

Я неправильно истолковал, как он должен работать, или это ошибка? Я использую последнюю версию Chrome (19 на момент написания).

Чтобы уточнить, я хочу знать, почему в первую очередь разрешено вводить число, большее указанного указанного max. Я понимаю, что он дает всплывающую подсказку о представлении формы, сообщая вам, что он недействителен, но кажется непоследовательным поведением, что счетчик не позволит вам пройти выше максимума, но вы можете просто набрать число выше max в любое время, чтобы обойти он.

Если это почему-то по какой-то причине, почему? И есть ли лучший вариант для обеспечения ввода диапазона, не прибегая к JS?

Ответы

Ответ 1

Он работает, но вы видите только сообщение об ошибке (подсказка), если вы ввели в свой код кнопку отправки и форму:

<form action="#" method="get">
  <input type="number" max="99" />
  <input type="submit" value="Submit!" />
</form>

jsFiddle

Ответ 2

Это старый вопрос, но я не нашел подходящих ответов на этот вопрос в любом месте. это поведение по-прежнему происходит в хроме (версия 61).

Я нашел небольшой трюк, который можно использовать в некоторой ситуации. это актуально для тех, кто использует библиотеки привязки данных, такие как aurelia, angular и т.д. Я тестировал только на аурелии, но это должно работать и для других.

трюк полагается на то, что ввод типа range обеспечивает ограничение min/max.

мы просто создаем другой вход (типа range), который ограничен тем же значением, что и обычный ввод, и мы спрячем его через css.

когда пользователь вводит что-то большее, чем значение max, оно будет привязываться к значению max.

здесь демо в аурелии: https://gist.run/?id=86fc278d3837718be4691acd5625aaad