html - atributos - Permita 2 decimales en<input type="number">

input type textarea

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

En entrada:

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

En guión:

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

Answer 4

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

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

Answer 5

La mejor y más simple forma en que se me ocurrió es esta ✔️

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

Answer 6

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 "paso", "min" y "patrón" se validarán cuando se envíe el formulario, no onblur. No necesita el step si tiene un pattern y no necesita un pattern si tiene un step . Entonces podría volver al step="any" con 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 admite type="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 soporte HTML5 deficiente y 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.

Answer 7

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

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

Answer 8

Usa este código

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

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

Answer 9

solo escribe

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

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

Answer 10

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: escriba el método setTwoDecimalPlace

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

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

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