Jquery Number formatter

On text box I would like to format the text when the user types like number. 1234 should become 1,234.00. It should also开发者_开发问答 work when you do the copy paste.

I would like to know from group if any one used any good jquery plug in for this. I need this only on the Textbox.

I just put together a jQuery plugin that will do what you're asking. Play around with the jsFiddle. I'll break the pieces down here.

The Plugin

The plugin will accept a few options for specifying the thousands and decimal separators, and the number of zeroes you want in on the decimals side of the number.

var defaultOptions = {
    thousands: ',',
    decimal: '.',
    zeroes: 2    
};

$.fn.currencyField = function(options) {
    var opts = this.options = $.extend({}, defaultOptions, options);
    this.bind('paste', function(e) { onPaste(e,opts); });
    this.bind('change', function(e) { onChange(e,opts); });
};

You can use it like this

$('input[type=text]').currencyField();

The on 'paste' event

jQuery will bind to an undocumented 'paste' event that should trigger no matter how content is pasted. Unfortunately the event itself fires before the content is added to the input field, so you need to set a short timeout before formatting the contents of the field.

function onPaste(evt, options) {
    window["currencyField-target"] = evt.target;
    window.setTimeout(function() {
        $(window["currencyField-target"]).trigger("change");
    }, 10);
}

function onChange(evt, options) {
    if (isFormattableValue(evt.target.value)) {
        evt.target.value = formatValue(evt.target.value, options);
    }
}

Formatting the thousands

There are a couple of ways you can do this, but they all pretty much rely on converting an integer to a String, reversing the order of the characters, inserting a delimiter between every third character, and reversing the order once more.

function formatThousands(value, separator) {
    var buf = [];
    value = String(value).split('').reverse();
    for (var i = 0; i < value.length; i++) {
        if (i % 3 === 0 && i !== 0) {
            buf.push(separator);
        }   
        buf.push(value[i]);
    }
    return buf.reverse().join('');
}

Formatting the decimal

In this plugin the number of characters to include after the decimal is variable, so we'll convert the numeric value to String and take the first 'n' characters from it. If there aren't enough characters, then we'll add zeroes to the beginning until there are.

function formatDecimal(value, zeroes) {
    value = value || 0;
    value = String(value).substr(0,zeroes);
    zeroes = zeroes - value.length;
    for (zeroes; zeroes > 0; zeroes--) {
        value = value + '0';    
    }
    return value;
}

Here is a Number Format Plugin. Unfortunately, the description appears to be in Portuguese.

This one does exactly what you need: http://scottonwriting.net/sowblog/archive/2011/06/25/creating-a-currency-masked-textbox-with-on-the-fly-currency-formatting.aspx

Try this, it's the best such plugin I've found:

jquery-numberformatter - the docs are in the jquery.numberformatter-1.2.2.js file.

formatNumber(options, writeBack, giveReturnValue) 

Reads the value from the subject, parses to a Javascript Number object, then formats back to text using the passed options and write back to the subject.

parseNumber(options)

Parses the value in the subject to a Number object using the passed options to decipher the actual number from the text, then writes the value as text back to the subject.

Alternatively, try this one. It looks good too:

jquery-formatcurrency