У меня есть <input type="number">
и я хочу ограничить ввод пользователей только цифрами или числами с десятичными знаками до 2 десятичных знаков.
В основном, я прошу ввод цен.
Я хотел избежать регулярных выражений. Есть ли способ сделать это?
<input type="number" required name="price" min="0" value="0" step="any">
type="text"
все равно возвращаются , так какое это имеет значение?Ответы:
Вместо
step="any"
, который позволяет использовать любое количество знаков после запятой, используйтеstep=".01"
, который допускает до двух знаков после запятой.Более подробная информация в спецификации: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute.
источник
500.12345
в любом из входных данных, возможно, наше понимание требований отличается.:valid
и:invalid
применяются в соответствии с ожиданиями.В этом случае кто-то ищет регулярное выражение, которое допускает только числа с необязательными двумя десятичными знаками
Например, я нашел решение ниже достаточно надежным
HTML:
JS / JQuery:
источник
setTimeout()
нужно дождаться завершенияkeydown
события, прежде чем устанавливатьnewVal
(иначе оно будет таким же, какoldVal
). Однако, с таймаутом 0, это бессмысленно и не работает, так как оба значения часто одинаковы (в Firefox). Например, если вы установите значение 1, оно будет работать нормально.Для валюты я бы предложил:
Смотрите http://jsfiddle.net/vx3axsk5/1/
Свойства HTML5 "step", "min" и "pattern" будут проверяться при отправке формы, а не onblur. Вам не нужно,
step
если у вас есть,pattern
и вам не нужно,pattern
если у вас естьstep
. Таким образом, вы можете вернуться кstep="any"
моему коду, так как шаблон будет проверять его в любом случае.Если вы хотите проверить onblur, я считаю, что предоставление пользователю визуальной подсказки также полезно, как окрашивание фона в красный цвет. Если браузер пользователя не поддерживает,
type="number"
он вернется кtype="text"
. Если браузер пользователя не поддерживает проверку шаблона HTML5, мой фрагмент JavaScript не препятствует отправке формы, но дает визуальный намек. Таким образом, для людей с плохой поддержкой HTML5 и людей, пытающихся взломать базу данных с отключенным JavaScript или подделывать HTTP-запросы, вам все равно придется снова проверять на сервере. Пункт с проверкой на переднем конце для лучшего пользовательского опыта. Таким образом, пока большинство ваших пользователей имеют хороший опыт, можно полагаться на функции HTML5, если код все еще работает, и вы можете проверить его на бэкэнде.источник
pattern
не работает дляinput type=number
:<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.
Шаг 1: Подключите поле ввода вашего номера HTML к событию onchange
или в коде HTML
Шаг 2: Напишите
setTwoDecimalPlace
методВы можете изменить количество десятичных разрядов, изменяя значение, передаваемое в
toFixed()
метод. Смотрите MDN документы .источник
Я нашел, что использование jQuery было моим лучшим решением.
источник
Попробуйте это для разрешения только 2 десятичных в типе ввода
Или используйте jQuery в соответствии с предложением @SamohtVII
источник
Используйте этот код
По умолчанию значение шага для элементов ввода HTML5 равно step = "1".
источник
просто пиши
lang = 'nb "позволяет записывать десятичные числа с запятой или точкой
источник
На входе:
По сценарию:
источник