В jQuery, какой лучший способ форматирования числа до 2 знаков после запятой?

Это то, что у меня есть прямо сейчас:

$("#number").val(parseFloat($("#number").val()).toFixed(2));

Мне это кажется грязным. Я не думаю, что правильно связываю функции. Должен ли я вызывать его для каждого текстового поля или я могу создать отдельную функцию?


person Iain Holder    schedule 25.01.2009    source источник
comment
Возможный дубликат Число формата, чтобы всегда отображались 2 десятичных знака   -  person Liam    schedule 06.08.2018


Ответы (3)


Если вы делаете это с несколькими полями или делаете это довольно часто, то, возможно, вам поможет плагин.
Вот начало плагина jQuery, который форматирует значение поля до двух знаков после запятой.
Это так. запускается событием onchange поля. Вы можете хотеть что-то другое.

<script type="text/javascript">

    // mini jQuery plugin that formats to two decimal places
    (function($) {
        $.fn.currencyFormat = function() {
            this.each( function( i ) {
                $(this).change( function( e ){
                    if( isNaN( parseFloat( this.value ) ) ) return;
                    this.value = parseFloat(this.value).toFixed(2);
                });
            });
            return this; //for chaining
        }
    })( jQuery );

    // apply the currencyFormat behaviour to elements with 'currency' as their class
    $( function() {
        $('.currency').currencyFormat();
    });

</script>   
<input type="text" name="one" class="currency"><br>
<input type="text" name="two" class="currency">
person meouw    schedule 25.01.2009
comment
Привет, я хотел бы знать, нужен ли нам еще один плагин для currencyFormat()?.. - person Bat_Programmer; 04.07.2011

Может быть, что-то вроде этого, где вы можете выбрать более одного элемента, если хотите?

$("#number").each(function(){
    $(this).val(parseFloat($(this).val()).toFixed(2));
});
person svinto    schedule 25.01.2009
comment
Кстати, у вас не должно быть дубликатов идентификаторов в вашем доме. Рассмотрите возможность изменения «числа» на класс. - person gradbot; 25.01.2009
comment
@gradbot - ничто из этого не подразумевает, что существует более одного элемента с id = number. Похоже, что svinto просто использует функцию each как способ уменьшить количество появлений в коде волшебной строки #number. Это небольшое (и хорошее, я думаю) улучшение кода LainMH. Если это форматирование нужно сделать только на одной странице, то я бы предпочел сделать это именно так. Если его нужно продублировать более чем на одной странице, я предпочитаю подход плагина meouw, за исключением извлечения во внешний файл javascript. - person Daniel Schilling; 29.03.2011
comment
@DanielSchilling.. Я предполагаю, что gradbot пытался сказать, что если вы хотите применить одну и ту же функцию к нескольким полям ввода на одной странице, вы также не можете предоставить им один и тот же идентификатор или вы не можете продолжать упоминать идентификатор каждого поля ввода, например это ('#num1,#num2').each(function(){});. Так что было бы лучше использовать классовый подход, подобный этому ('.number').each(function(){});. И предоставить каждому полю ввода общий номер класса - person payal_suthar; 06.10.2016

Мы модифицируем функцию Meouw для использования с keyup, потому что когда вы используете ввод, это может быть более полезным.

Проверь это:

Привет! @heridev и я создали небольшую функцию в jQuery.

Вы можете попробовать следующее:

HTML

<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">​

jQuery

// apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
    $('.two-digits').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            }  
         }            
         return this; //for chaining
    });
});

ДЕМО ОНЛАЙН:

http://jsfiddle.net/c4Wqn/

(@heridev, @vicmaster)

person vicmaster    schedule 27.11.2012
comment
Я думаю, вы можете использовать .change() вместо .keyup()... - person Peter Lenjo; 26.12.2019