Sto creando un modulo in cui l'utente può immettere un importo in dollari utilizzando un tag di immissione del numero html. C'è un modo per avere la casella di input mostra sempre 2 posizioni decimali?Fare in modo che un numero HTML di input visualizzi sempre 2 posizioni decimali
Quindi, se qualcun altro inciampa su questo ecco una soluzione JavaScript per questo problema:
Fase 1: Hook tua casella di input numero di HTML a una onchange evento
myHTMLNumberInput.onchange = setTwoNumberDecimal;
o in html codice se lo preferite
<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />
Fase 2: Write il metodo setTwoDecimalPlace
function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}
Cambiando il '2' in toFixed si può ottenere più o meno decimali posti se lo preferite.
Purtroppo non sembra funzionare in Firefox 50. – dangowans
Cerca in toFixed per i numeri Javascript. Potresti scrivere una funzione onChange per il tuo campo numerico che chiama a Risolto sull'ingresso e imposta il nuovo valore.
onChange è davvero fastidioso. Mi piace usare la funzione .blur di jQuery. http://api.jquery.com/blur/ – RandomUs1r
Questa è solo una soluzione minimalista, ma sì, usare jQuery potrebbe rendere la vita degli OP più facile. – spots
@ RandomUs1r non ha davvero bisogno di usare jQuery solo per accedere a 'onBlur' – RozzA
Pure html non è in grado di fare ciò che vuoi. Il mio suggerimento sarebbe di scrivere una semplice funzione javascript per fare il roudning per te.
Lo sto salvando con un modello backbone che usa un float per questi dati, quindi non è questo il problema. Voglio solo che il numero visualizzato nella casella di testo abbia due cifre decimali. – Cristiano
Nevermind, ho frainteso quello che stavi dicendo ... deve essere fatto questo pesare – Cristiano
una soluzione in linea combina Groot e Ivaylo suggerimenti nel seguente formato:
onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"
Questo non funziona, perché se hai un segnaposto prenderà per default quel valore e non puoi cambiarlo in input. –
È possibile utilizzare numerictextbox di Telerik per un sacco di funzionalità
<input id="account_rate" data-role="numerictextbox" data-format="#.000" data-min="0.001" data-max="100" data-decimals="3" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" />
il codice di base è free to download
La soluzione accettata qui non è corretta. Prova questo nel codice HTML:
onchange="setTwoNumberDecimal(this)"
e la funzione a guardare come:
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
Quali altre persone pubblicati qui lavorato principalmente, ma utilizzando onchange non funziona quando cambio il numero utilizzando le frecce nella stessa direzione più di una volta. Che cosa ha funzionato era oninput. Il mio codice (prendendo a prestito principalmente da MC9000):
HTML
<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">
JS
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
Non con HTML puro. Quale linguaggio lato server usi? Hai knwo javascript? –