Есть ли способ отформатировать input[type='number']
значение, чтобы всегда отображать 2 десятичных знака?
Пример: я хочу видеть 0.00
вместо 0
.
Есть ли способ отформатировать input[type='number']
значение, чтобы всегда отображать 2 десятичных знака?
Пример: я хочу видеть 0.00
вместо 0
.
Ответы:
Решено в соответствии с предложениями и добавлением части jQuery для принудительного форматирования целых чисел:
parseFloat($(this).val()).toFixed(2)
Вы действительно не можете, но вы на полпути может быть:
<input type='number' step='0.01' value='0.00' placeholder='0.00' />
Использование step
атрибута включит его . Он определяет не только продолжительность цикла, но и допустимые числа. Использование step="0.01"
должно помочь, но это может зависеть от того, насколько браузер соответствует стандарту.
<input type='number' step='0.01' value='5.00'>
input[type="text"]
все встроенные навороты, которые идут с input[type="number"]
полностью переработанными для него функциями, или заменяют это поле другим, чтобы отображать значение в зависимости от состояния элемента.
Решения, использующие input="number"
step="0.01"
отлично работают в Chrome, однако не работают в некоторых браузерах, особенно в Frontmotion Firefox 35 в моем случае ... который я должен поддерживать.
Мое решение заключалось в jQuery с плагином Игоря Эскобара jQuery Mask следующим образом:
<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">
Это работает хорошо, конечно, после этого следует проверить отправленное значение :) ПРИМЕЧАНИЕ, если бы мне не приходилось этого делать для совместимости с браузером, я бы использовал ответ @Rich Bradshaw выше.
type
атрибут input number
или text
. Если он возвращается, text
даже если HTML написан как, number
тогда браузер не поддерживает этот тип, и привязка этого поведения к нему является подходящим действием.
Основываясь на этом ответе от @Guilherme Ferreira, вы можете запускать parseFloat
метод каждый раз, когда поле изменяется. Поэтому значение всегда показывает два десятичных знака, даже если пользователь изменяет значение, вводя число вручную.
<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()
функция сработает за короткое время между вводом пользователя и нажатием кнопки отправки. Следовательно, это не должно быть проблемой.
Это позволяет установить максимум 2 десятичных знака без автоматического округления до 2 знаков, если пользователь не закончил вводить текст.
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)
}
}
Если вы приземлились здесь, просто задаетесь вопросом, как ограничить до 2 знаков после запятой, у меня есть собственное решение 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)" />
Обратите внимание, что это не может AFAIK, защититься от этой хромовой ошибки с вводом числа.
Я знаю, что это старый вопрос, но мне кажется, что ни один из этих ответов не отвечает на заданный вопрос, поэтому, надеюсь, это поможет кому-то в будущем.
Да, вы всегда можете показать 2 десятичных знака, но, к сожалению, это невозможно сделать с помощью одних атрибутов элемента, вы должны использовать JavaScript.
Я должен отметить, что это не идеально для больших чисел, так как всегда заставляет конечные нули, поэтому пользователю придется переместить курсор назад вместо удаления символов, чтобы установить значение больше 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" />
Это средство быстрого форматирования в JQuery, использующее .toFixed(2)
функцию для двух десятичных знаков.
<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));
}
Минусы: вы должны вызывать это каждый раз, когда номер ввода изменяется, чтобы переформатировать его.
// 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);
});
Примечание: по какой-то причине, даже если вход имеет тип «число», jQuery val()
возвращает строку. Следовательно parseFloat()
.
Мой предпочтительный подход, который использует data
атрибуты для хранения состояния числа:
<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
})
Главный ответ дал мне решение, но мне не понравилось, что ввод пользователя был изменен немедленно, поэтому я добавил задержку, которая, на мой взгляд, способствует лучшему пользовательскому опыту.
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
для angular https://github.com/assisrafael/angular-input-masks
только это:
<input ui-number-mask ng-model="valores.irrf" />
Если ставить значения одно за другим ....
need: 120,01
цифра на цифру
= 0,01
= 0,12
= 1,20
= 12,00
= 120,01 final number.
Взгляните на это :
<input type="number" step="0.01" />
robot_speed = parseFloat(robot_speed).toFixed(2)