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

Ответ 1

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

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

Ответ 2

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

^\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);
});

Ответ 3

Для валюты я предлагаю:

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

Ответ 4

Шаг 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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Лучший & Простой способ, которым я придумал, это ✔️

 <input min="0" max="1" step=".10" type="number" value="0">

Ответ 8

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

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

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

Ответ 9

просто напишите

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

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

Ответ 10

На входе:

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

В script:

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