Дозволити 2 знаки після коми у <введення типу = "число">

У мене є <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

Якщо ви хочете, хтось шукає регулярний вираз, який дозволяє лише цифри з необов'язковими 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);
});

Для валюти я б запропонував:

<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 "крок", "хв" та "шаблон" будуть перевірені під час подання форми, а не onblur. Вам не потрібно, stepякщо у вас є, patternі вам не потрібно, patternякщо у вас є step. Таким чином, ви можете повернутися до step="any"мого коду, оскільки шаблон буде його перевірити в будь-якому випадку.

Якщо ви хочете перевірити onblur, я вважаю, що надати користувачеві візуальну підказку також корисно, як фарбування фону в червоний колір. Якщо веб-переглядач користувача не підтримує type="number"його, він стане резервним type="text". Якщо браузер користувача не підтримує перевірку шаблону HTML5, мій фрагмент JavaScript не заважає форму надсилати форму, але він надає візуальну підказку. Тож людям з поганою підтримкою HTML5 та людям, які намагаються зламати базу даних із відключеним JavaScript або підробляти HTTP-запити, вам потрібно знову перевірити їх на сервері. Точка з валідацією на передній частині - для кращого користувальницького досвіду. Тож, поки більшість ваших користувачів мають хороший досвід, непогано покладатися на функції HTML5 за умови, що код все ще буде працювати і ви зможете перевірити його на задній частині.

Крок 1: Підключіть поле введення HTML-номера до події, що змінюється

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">

За замовчуванням значення Step для елементів введення 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);
});