Permita 2 decimales en <input type = "number">

Tengo un <input type="number">y quiero restringir la entrada de los usuarios a números puramente o números con decimales de hasta 2 decimales.

Básicamente, estoy pidiendo una entrada de precio.

Quería evitar hacer expresiones regulares. ¿Hay una manera de hacerlo?

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

En lugar de step="any", que permite cualquier número de lugares decimales, use step=".01", que permite hasta dos lugares decimales.

Más detalles en la especificación: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

En caso de que alguien esté buscando una expresión regular que permita solo números con 2 decimales opcionales

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

Por ejemplo, he encontrado que la solución a continuación es bastante confiable

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

Por moneda, sugeriría:

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

Ver http://jsfiddle.net/vx3axsk5/1/

Las propiedades HTML5 "step", "min" y "pattern" se validarán cuando se envíe el formulario, no onblur. No necesita el stepsi tiene un patterny no necesita un patternsi tiene un step. Entonces podría volver a step="any"mi código ya que el patrón lo validará de todos modos.

Si desea validar onblur, creo que darle al usuario una señal visual también es útil, como colorear el fondo de rojo. Si el navegador del usuario no es compatibletype="number" , recurrirá a type="text". Si el navegador del usuario no admite la validación de patrones HTML5, mi fragmento de JavaScript no impide que el formulario se envíe, pero da una señal visual. Por lo tanto, para las personas con poco soporte de HTML5 y para las personas que intentan piratear la base de datos con JavaScript deshabilitado o falsificar solicitudes HTTP, de todos modos debe validar en el servidor. El punto con la validación en el front-end es para una mejor experiencia de usuario. Por lo tanto, siempre que la mayoría de sus usuarios tengan una buena experiencia, está bien confiar en las características de HTML5, siempre que el código siga funcionando y pueda validarlo en el back-end.

Paso 1: conecta el cuadro de entrada de tu número HTML a un evento onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

o en el código HTML

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

Paso 2: escribe el setTwoDecimalPlacemétodo

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

Puede alterar el número de decimales variando el valor pasado al toFixed()método. Ver documentos de MDN .

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

Descubrí que usar jQuery era mi mejor solución.

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

Pruebe esto para permitir solo 2 decimales en el tipo de entrada

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

O use jQuery como lo sugiere @SamohtVII

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

Usa este código

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

Por defecto, el valor de Paso para los elementos de entrada HTML5 es step = "1".

solo escribe

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

lang = 'nb "te permite escribir tus números decimales con coma o punto

En entrada:

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

En guión:

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