Czy istnieje sposób na sformatowanie input[type='number']
wartości, aby zawsze wyświetlać 2 miejsca po przecinku?
Przykład: chcę zobaczyć 0.00
zamiast 0
.
Czy istnieje sposób na sformatowanie input[type='number']
wartości, aby zawsze wyświetlać 2 miejsca po przecinku?
Przykład: chcę zobaczyć 0.00
zamiast 0
.
Odpowiedzi:
Rozwiązano postępując zgodnie z sugestiami i dodając fragment jQuery, aby wymusić format na liczbach całkowitych:
parseFloat($(this).val()).toFixed(2)
change
metody, aby wywoływać ją za każdym razem, gdy zmieni się pole: stackoverflow.com/a/58502237/2056125
Naprawdę nie możesz, ale możesz być w połowie drogi:
<input type='number' step='0.01' value='0.00' placeholder='0.00' />
Użycie step
atrybutu umożliwi to . Określa nie tylko, ile ma cyklować, ale także dopuszczalne liczby. Użycie step="0.01"
powinno załatwić sprawę, ale może to zależeć od tego, jak przeglądarka jest zgodna ze standardem.
<input type='number' step='0.01' value='5.00'>
input[type="text"]
wszystkich rodzimych dzwonków i gwizdków, które są input[type="number"]
całkowicie ponownie zaimplementowane, lub zamieniają to pole na inne, aby wyświetlić wartość w zależności od stanu elementu.
Rozwiązania, których używam, input="number"
step="0.01"
działają świetnie dla mnie w Chrome, jednak nie działają w niektórych przeglądarkach, szczególnie w moim przypadku Frontmotion Firefox 35 .. które muszę wspierać.
Moim rozwiązaniem było użycie jQuery z wtyczką Igora Escobara jQuery Mask w następujący sposób:
<script src="/your/path/to/jquery-mask.js"></script>
<script>
$(document).ready(function () {
$('.usd_input').mask('00000.00', { reverse: true });
});
</script>
<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">
Działa to dobrze, oczywiście należy później sprawdzić podaną wartość :) UWAGA, gdybym nie musiał tego robić dla kompatybilności przeglądarki, skorzystałbym z powyższej odpowiedzi autorstwa @Rich Bradshaw.
type
atrybut wejścia to number
lub text
. Jeśli zwraca, text
mimo że kod HTML jest napisany jako, number
wówczas przeglądarka nie obsługuje tego typu, a podpięcie tego zachowania do niego jest odpowiednią akcją.
Na podstawie tej odpowiedzi od @Guilherme Ferreira możesz uruchomić parseFloat
metodę za każdym razem, gdy zmieni się pole. Dlatego wartość zawsze pokazuje dwa miejsca po przecinku, nawet jeśli użytkownik zmieni wartość ręcznie wpisując liczbę.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".floatNumberField").change(function() {
$(this).val(parseFloat($(this).val()).toFixed(2));
});
});
</script>
<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />
change()
funkcja zostanie uruchomiona w krótkim czasie między wprowadzeniem danych przez użytkownika a kliknięciem przycisku Prześlij. Dlatego nie powinno to stanowić problemu.
Działa to w celu wymuszenia maksymalnie 2 miejsc po przecinku bez automatycznego zaokrąglania do 2 miejsc, jeśli użytkownik nie skończył pisać.
function naturalRound(e) {
let dec = e.target.value.indexOf(".")
let tooLong = e.target.value.length > dec + 3
let invalidNum = isNaN(parseFloat(e.target.value))
if ((dec >= 0 && tooLong) || invalidNum) {
e.target.value = e.target.value.slice(0, -1)
}
}
Jeśli wylądowałeś tutaj, zastanawiasz się, jak ograniczyć do 2 miejsc po przecinku , mam natywne rozwiązanie javascript:
JavaScript:
function limitDecimalPlaces(e, count) {
if (e.target.value.indexOf('.') == -1) { return; }
if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
e.target.value = parseFloat(e.target.value).toFixed(count);
}
}
HTML:
<input type="number" oninput="limitDecimalPlaces(event, 2)" />
Zauważ, że to nie może AFAIK, bronić się przed tym błędem chrome za pomocą wprowadzania liczb.
Wiem, że to stare pytanie, ale wydaje mi się, że żadna z tych odpowiedzi nie wydaje się odpowiadać na zadane pytanie, więc mam nadzieję, że pomoże to komuś w przyszłości.
Tak, zawsze możesz pokazać 2 miejsca po przecinku, ale niestety nie da się tego zrobić z samymi atrybutami elementu, musisz użyć JavaScript.
Powinienem zwrócić uwagę, że nie jest to idealne dla dużych liczb, ponieważ zawsze wymusza końcowe zera, więc użytkownik będzie musiał cofnąć kursor zamiast usuwać znaki, aby ustawić wartość większą niż 9,99
//Use keyup to capture user input & mouse up to catch when user is changing the value with the arrows
$('.trailing-decimal-input').on('keyup mouseup', function (e) {
// on keyup check for backspace & delete, to allow user to clear the input as required
var key = e.keyCode || e.charCode;
if (key == 8 || key == 46) {
return false;
};
// get the current input value
let correctValue = $(this).val().toString();
//if there is no decimal places add trailing zeros
if (correctValue.indexOf('.') === -1) {
correctValue += '.00';
}
else {
//if there is only one number after the decimal add a trailing zero
if (correctValue.toString().split(".")[1].length === 1) {
correctValue += '0'
}
//if there is more than 2 decimal places round backdown to 2
if (correctValue.toString().split(".")[1].length > 2) {
correctValue = parseFloat($(this).val()).toFixed(2).toString();
}
}
//update the value of the input with our conditions
$(this).val(correctValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-number-input" class="form-control trailing-decimal-input" type="number" min="0.01" step="0.01" value="0.00" />
To jest szybki program formatujący w JQuery używający .toFixed(2)
funkcji dla dwóch miejsc po przecinku.
<input class="my_class_selector" type='number' value='33'/>
// if this first call is in $(document).ready() it will run
// after the page is loaded and format any of these inputs
$(".my_class_selector").each(format_2_dec);
function format_2_dec() {
var curr_val = parseFloat($(this).val());
$(this).val(curr_val.toFixed(2));
}
Wady: musisz to wywołać za każdym razem, gdy wprowadzany numer jest zmieniany, aby go ponownie sformatować.
// listener for input being changed
$(".my_class_selector").change(function() {
// potential code wanted after a change
// now reformat it to two decimal places
$(".my_class_selector").each(format_2_dec);
});
Uwaga: z jakiegoś powodu, nawet jeśli dane wejściowe są typu „liczba”, jQuery val()
zwraca ciąg. Stąd parseFloat()
.
Moje preferowane podejście, które wykorzystuje data
atrybuty do przechowywania stanu liczby:
<input type='number' step='0.01'/>
// react to stepping in UI
el.addEventListener('onchange', ev => ev.target.dataset.val = ev.target.value * 100)
// react to keys
el.addEventListener('onkeyup', ev => {
// user cleared field
if (!ev.target.value) ev.target.dataset.val = ''
// non num input
if (isNaN(ev.key)) {
// deleting
if (ev.keyCode == 8)
ev.target.dataset.val = ev.target.dataset.val.slice(0, -1)
// num input
} else ev.target.dataset.val += ev.key
ev.target.value = parseFloat(ev.target.dataset.val) / 100
})
Najlepsza odpowiedź dała mi rozwiązanie, ale nie podobało mi się, że dane wejściowe użytkownika zostały natychmiast zmienione, więc dodałem opóźnienie, które moim zdaniem przyczynia się do lepszego doświadczenia użytkownika
var delayTimer;
function input(ele) {
clearTimeout(delayTimer);
delayTimer = setTimeout(function() {
ele.value = parseFloat(ele.value).toFixed(2).toString();
}, 800);
}
<input type='number' oninput='input(this)'>
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'replace'
})
export class ReplacePipe implements PipeTransform {
transform(value: any): any {
value = String(value).toString();
var afterPoint = '';
var plus = ',00';
if (value.length >= 4) {
if (value.indexOf('.') > 0) {
afterPoint = value.substring(value.indexOf('.'), value.length);
var te = afterPoint.substring(0, 3);
if (te.length == 2) {
te = te + '0';
}
}
if (value.indexOf('.') > 0) {
if (value.indexOf('-') == 0) {
value = parseInt(value);
if (value == 0) {
value = '-' + value + te;
value = value.toString();
}
else {
value = value + te;
value = value.toString();
}
}
else {
value = parseInt(value);
value = value + te;
value = value.toString();
}
}
else {
value = value.toString() + plus;
}
var lastTwo = value.substring(value.length - 2);
var otherNumbers = value.substring(0, value.length - 3);
if (otherNumbers != '')
lastTwo = ',' + lastTwo;
let newValue = otherNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ".") + lastTwo;
parseFloat(newValue);
return `${newValue}`;
}
}
}
ui-number-mask
dla kątowych, https://github.com/assisrafael/angular-input-masks
tylko to:
<input ui-number-mask ng-model="valores.irrf" />
Jeśli umieścisz wartość jeden po drugim ....
need: 120,01
cyfra na cyfrę
= 0,01
= 0,12
= 1,20
= 12,00
= 120,01 final number.
Spójrz na to :
<input type="number" step="0.01" />
Oto poprawna odpowiedź:
<input type="number" step="0.01" min="-9999999999.99" max="9999999999.99"/>
robot_speed = parseFloat(robot_speed).toFixed(2)