Разрешить 2 десятичных знака в <input type = «number»>

У меня есть <input type="number">и я хочу ограничить ввод пользователей только цифрами или числами с десятичными знаками до 2 десятичных знаков.

В основном, я прошу ввод цен.

Я хотел избежать регулярных выражений. Есть ли способ сделать это?

<input type="number" required name="price" min="0" value="0" step="any">

Вместо step="any", который позволяет использовать любое количество знаков после запятой, используйте step=".01", который допускает до двух знаков после запятой.

Более подробная информация в спецификации: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute.

В этом случае кто-то ищет регулярное выражение, которое допускает только числа с необязательными двумя десятичными знаками

^\d*(\.\d{0,2})?$

Например, я нашел решение ниже достаточно надежным

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Для валюты я бы предложил:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Смотрите 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, если код все еще работает, и вы можете проверить его на бэкэнде.

Шаг 1: Подключите поле ввода вашего номера HTML к событию onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

или в коде HTML

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Шаг 2: Напишите setTwoDecimalPlaceметод

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

Вы можете изменить количество десятичных разрядов, изменяя значение, передаваемое в toFixed()метод. Смотрите MDN документы .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Я нашел, что использование jQuery было моим лучшим решением.

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Попробуйте это для разрешения только 2 десятичных в типе ввода

<input type="number" step="0.01" class="form-control"  />

Или используйте jQuery в соответствии с предложением @SamohtVII

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Используйте этот код

<input type="number" step="0.01" name="amount" placeholder="0.00">

По умолчанию значение шага для элементов ввода HTML5 равно step = "1".

просто пиши

<input type="number" step="0.1" lang="nb">

lang = 'nb "позволяет записывать десятичные числа с запятой или точкой

На входе:

step="any"
class="two-decimals"

По сценарию:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});