Ответ 1
Это довольно старый вопрос, но я пытался понять одно и то же, и это то, что я смог определить.
Первый, ввод типа number не использует атрибут pattern, поэтому он игнорирует его.
Второй, атрибут step не только определяет шаг клика вверх/вниз, но также и набор допустимых значений. Например, если вы установите шаг в 1.11, допустимые значения равны 1.11, 2.22, 3.33 и т.д. Если вы введете 5.2 и отправьте, он ответит "Пожалуйста, введите действительное значение. Два ближайших действительных значения: 4.44 и 5.55". Если вы не вводите этот шаг, по умолчанию он равен 1. Тогда он разрешает только "целые числа" (я использую кавычки, потому что технически он позволит 1. или 1.0 или 1.00 и т.д.). Если вы хотите использовать любое число, используйте step="any". Я где-то читал, что в то время как chrome применяет шаг по умолчанию 1, firefox будет давать десятичные знаки (обрабатывает его как любой?).
Третий, ничего из этого не работает, если он не встроен в тег form.
Итак, если вы хотите использовать число до 2 десятичных знаков, используйте type="number" step=".01" (понимая, что ваш увеличивающий/уменьшающий кликер увеличится/уменьшится на .01) или используйте type="text" pattern="\d+(\.\d{2})?". Обратите внимание, что в вашем регулярном выражении он не позволит .23, так как у вас есть \d+. Это позволит 0.23. Если вы хотите разрешить десятичное число без ведущего 0, вместо этого используйте \d+(\.\d{2})?. Он также допускает только 2 десятичных знака или нет (отклоняет 1. и 1.2, но принимает 1.20). Если это то, чего ты хочешь, отлично. Просто хотел убедиться.
\d*(\.\d{0,2})? будет принимать любое число до двух десятичных знаков, но не более. Он также примет только ., поэтому вам придется поиграть на основе того, что вы хотите.
Надеюсь, что это поможет вам или кому-либо еще, что натолкнулось на это, как я.