Wprowadzanie danych w formacie html zawsze wyświetla 2 miejsca dziesiętne

Question

Tworzę formularz, w którym użytkownik może wprowadzić kwotę w dolarach za pomocą znacznika wprowadzania html. Czy istnieje sposób, aby w polu wprowadzania zawsze wyświetlały się 2 miejsca dziesiętne?

Answer 1

Więc jeśli ktoś potyka się na to tutaj jest rozwiązanie JavaScript do tego problemu:

Krok 1: Hook swoje pole wprowadzania numeru HTML do onchange imprezy

myHTMLNumberInput.onchange = setTwoNumberDecimal; 

lub w html Kod jeśli tak wolą

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

Krok 2: Write metoda setTwoDecimalPlace

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

Zmieniając „2” w toFixed można uzyskać więcej lub mniej miejsc po przecinku, jeśli tak wolisz.

Answer 2

Sprawdź w numerach kodu JavaScript toFixed. Możesz napisać funkcję onChange dla pola numeru, które wywołuje funkcję Naprawiono na wejściu i ustawia nową wartość.

Answer 3

Czysty html nie jest w stanie zrobić, co chcesz. Moją sugestią byłoby napisanie prostej funkcji javascript, aby wykonać roudning dla ciebie.

Answer 4

inline rozwiązanie łączy Groot i Ivaylo propozycje w poniższym formacie:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)" 

Answer 5

Można wykorzystać numerictextbox Telerik za dużo funkcjonalności

<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);" /> 

kod rdzeń jest free to download

Answer 6

Przyjęte tutaj rozwiązanie jest niepoprawne. Spróbuj tego w HTML:

onchange="setTwoNumberDecimal(this)" 

i funkcję wyglądać:

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

Answer 7

Co napisali inni ludzie tutaj głównie działało, ale stosując onchange nie działa przy zmianie numeru za pomocą strzałek w tym samym kierunku więcej niż jeden raz. To, co zadziałało, to oninput. Mój kod (pożyczanie głównie z 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); 
    };