Consenti 2 cifre decimali in <input type = “number”>

Ho un <input type="number">e voglio limitare l'input degli utenti a numeri puramente o numeri con decimali fino a 2 cifre decimali.

Fondamentalmente, sto chiedendo un input di prezzo.

Volevo evitare di fare regex. C'è un modo per farlo?

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

Invece di step="any", che consente un numero qualsiasi di cifre decimali, utilizzare step=".01", che consente fino a due posizioni decimali.

Maggiori dettagli nelle specifiche: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

In questo caso qualcuno è alla ricerca di una regex che consenta solo numeri con un 2 decimali opzionali

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

Per un esempio, ho trovato la soluzione di seguito abbastanza affidabile

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

Per la valuta, suggerirei:

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

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

Le proprietà HTML5 "step", "min" e "pattern" verranno convalidate quando il modulo viene inviato, non onblur. Non hai bisogno di stepse hai un patterne non hai bisogno di patternse hai un step. Quindi potresti tornare al step="any"mio codice poiché il modello lo convaliderà comunque.

Se desideri validare onblur, credo che dare all'utente un segnale visivo sia anche utile come colorare lo sfondo rosso. Se il browser dell'utente non supporta type="number", verrà eseguito il fallback a type="text". Se il browser dell'utente non supporta la convalida del pattern HTML5, il mio frammento JavaScript non impedisce l'invio del modulo, ma fornisce un segnale visivo. Quindi per le persone con scarso supporto HTML5 e le persone che cercano di hackerare il database con JavaScript disabilitato o forgiare richieste HTTP, è comunque necessario convalidare nuovamente sul server. Il punto con la convalida sul front-end è un'esperienza utente migliore. Quindi, fintanto che la maggior parte dei tuoi utenti ha una buona esperienza, va bene fare affidamento sulle funzionalità HTML5 purché il codice continui a funzionare e tu possa validare sul back-end.

Passaggio 1: agganciare la casella di input del numero HTML a un evento onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

o nel codice HTML

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

Passaggio 2: scrivere il setTwoDecimalPlace metodo

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

È possibile modificare il numero di cifre decimali variando il valore passato nel toFixed()metodo. Vedi i documenti MDN .

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

Ho scoperto che usare jQuery era la mia migliore soluzione.

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

Prova questo per consentire solo 2 decimali nel tipo di input

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

Oppure usa jQuery come suggerito da @SamohtVII

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

Usa questo codice

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

Per impostazione predefinita, il valore Step per gli elementi di input HTML5 è step = "1".

Scrivi e basta

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

lang = 'nb "ti consente di scrivere i tuoi numeri decimali con virgola o punto

Su input:

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

Sulla sceneggiatura:

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