Consenti 2 cifre decimali in <input type = "number">

Question

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

Answer 1

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

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

Answer 2

Prova questo per permettere solo il 2 decimale nel tipo di ingresso

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

Answer 3

Fase 1: Agganciare la tua casella di inserimento numero di HTML per 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" /> 

Fase 2: Scrivere il metodo setTwoDecimalPlace

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

è possibile modificare 2 o più decimali da

toFixed (2)

Answer 4

per valuta, io 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> 

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

Le proprietà HTML5 "step", "min" e "pattern" verranno convalidate quando il modulo è submit, non onblur. Non è necessario il step se si dispone di un pattern e non è necessario un pattern se si dispone di un step. Quindi potresti tornare a step="any" con il mio codice poiché il pattern lo convaliderà comunque.

Se si desidera convalidare 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 su type="text". Se il browser dell'utente non supporta la convalida del modello HTML5, il mio snippet JavaScript non impedisce al modulo di inviarlo, ma fornisce un segnale visivo. Quindi, per le persone con scarso supporto HTML5 e persone che cercano di hackerare nel database con JavaScript disabilitato o creare richieste HTTP, è necessario comunque convalidarlo nuovamente sul server. Il punto con la convalida sul front-end è per una migliore esperienza utente. Quindi, se la maggior parte degli utenti ha una buona esperienza, è meglio fare affidamento sulle funzionalità HTML5 a condizione che il codice funzioni ancora e che sia possibile convalidare il back-end.

Answer 5

Se caso qualcuno è alla ricerca di un'espressione regolare che consente solo i numeri con un optional 2 decimali

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

Answer 6

utilizzare questo codice

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

Per valore passo predefinito per gli elementi di ingresso HTML5 è step = "1".

Answer 7

su ingresso:

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

Su script:

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