HTML5 Тип ввода «Номер» Шаблон не применяется

19

В приведенном ниже коде в Chrome не применяется шаблон '00 .00 ', он позволяет использовать любой формат числа с неограниченными десятичными знаками. Шаблон отлично работает при использовании типа ввода «текст», поэтому не уверен, что это проблема «числа»?

Любые предложения оценены.

<input type="number" step="1.00" min="0" pattern="\d+(\.\d{2})?" class="form-control" id="JobCost" name="jobcost">

JSFiddle

    
задан Dean Whitehouse 03.04.2014 в 13:15
источник
  • ^ \ d + (\. \ d {1,2})? $ –  Vippy 19.01.2018 в 19:05

1 ответ

43

Это довольно старый вопрос, но я пытался понять одно и то же, и это то, что я смог определить.

Сначала , ввод типа 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 .

Итак, если вы хотите ввести число до двух десятичных знаков, используйте 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})? будет принимать любое число до двух десятичных знаков, но не более. Он также будет принимать только . , поэтому вам придется поиграть на основе того, что вы хотите.

Надеюсь, что это поможет вам или кому-либо еще, что натолкнулось на это, как я.

    
ответ дан smw 04.08.2014 в 20:53
источник
  • Отличное объяснение. Я получил сообщение «Пожалуйста, введите действительное значение. Два ближайших действительных значения: 4.44 и 5.55». как вы заявили, но не знал почему. Я работал над ценами, поэтому допускаются любые десятичные знаки. Когда я устанавливал шаг:: any (Rails) все работало нормально. –  Johan Wentholt 26.06.2017 в 11:41