JQuery Price Format

Created By Eduardo Cuducos and now maintened by Flávio Silveira. Go to Top Content

jQuery Price Format is a plugin to format input text fields or any HTML element as prices. For example, if you type 123456 in a input or set a p tag with this value, the plugin updates it to US$ 1,234.56. It is costumizable, so you can use other prefixes and separators (for example, use it to get R$ 1.234,55).

Versions

Version 2.0 — 26 Jan 2014

Now working with any HTML element.

Version 1.8 — 24 May 2013

Fix for not show the cents signal when limit is set to Zero. Added new option to show the plus sign.

Version 1.7 — 22 February 2012

Added new option to insert suffix and clear suffix. Added new function unmask, that return the value without mask.

Version 1.6 — 05 December 2011

Fixed issues for compress the script with YUI Compressor and Closure Compiler. Now we have the minified version for download.

Version 1.5 — 27 June 2011

Fixed some bugs with clearPrefix on initialize and with Keypad. Allow the del button and added new Option allowNegative (See the example).

Version 1.4 — 17 March 2011

Added new option to clear the prefix on blur (clearPrefix) to make more easier the process to put this data in a database. See the example

Version 1.3 — 16 April 2009

The issue about the keypad (v.1.2) is fixed.

Version 1.2 — 02 March 2009

Better user experience by decreasing the use of the keyup event, so avoiding user to see non-numerical chars or unformatted price while key is pressed.

Also, as the use of keydown, it is possible to navigate from one input to another with Tab key and send the form hitting Return key.

Version 1.1 — 09 February 2009

Settings options to limit max length (limit) and change the size of the cents field (centsLimit).
See the example.

Example 1 - Basic usage

JavaScript

$('#example1').priceFormat();

Result

This is the most basic usage. It loads default options: use US$ as prefix, a comma as thousands separator and a dot as cents separator.

Example 2 - Use with any HTML element

JavaScript

$('#htmlfield').priceFormat();

Result

123456

The same basic usage as above, but now using the value inside a H4.

Example 3 - Customize

JavaScript

$('#example2').priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.'
});

Result

This is a costumized format like brazilians use: R$ as prefix, a dot as cents separator and a dot as thousands separator. Play with the options centsSeparator and/or thousandsSeparator to better fit your site.

Example 4 - Skipping some option

JavaScript

$('#example3').priceFormat({
    prefix: '',
    thousandsSeparator: ''
});

Result

You can skip some of the options (prefix, centsSeparator and/or thousandsSeparator) by set them blank as you need it in your UI.

Example 5 - Working with limits

JavaScript

$('#example4').priceFormat({
    limit: 5,
    centsLimit: 3
});

Result

You can set a limited length (limit) or change the size of the cents field (centsLimit) to better fit your needs. This features was included in v. 1.1.

Example 6 - Clear Prefix and Suffix on Blur

JavaScript

$('#example5').priceFormat({
    clearPrefix: true
});

Result

The default value of clearPrefix and clearSuffix is false. Both work in same way.

Example 7 - Allow Negatives

JavaScript

$('#example6').priceFormat({
    allowNegative: true
});

Result

The default value of allowNegative property is false. Obviously, zero values are not negative.

Example 8 - Add Suffix

JavaScript

$('#example7').priceFormat({
    prefix: '',
    suffix: '€'
});

Result

The default value of suffix is empty.

Exemplo 9 - Unmask function

JavaScript

$('#example8').priceFormat();
var unmask = $('#example8).unmask();
alert(unmask); // alert 123456

Result

Return the value without mask. Negative numbers will return the minus signal.

Exemplo 10 - Plus sign

JavaScript

$('#example9').priceFormat({
    prefix: '',
    thousandsSeparator: '',
    insertPlusSign: 'true'
});

Result

Sometimes show the plus sign can improve your usability. Since you allow this option you will automaticly allow the use of the minus sign.

Download

jquery.price_format.2.0.js
jquery.price_format.2.0.min.js

In Git Hub

Prototype Version

Here is a version of Jquery Price Format to Prototype.
Development by Jessé Cardoso Mota and tested By Luis Felipe Marzagao.

Examples written by Jessé

new NumberFormat('your_input_here', {prefix: 'R$ '});

new NumberFormat('your_input_here', {prefix: '', thousandsSeparator: '', allowNegative: true});

Download Prototype Version

Download Prototype Minified Version

In Git Hub

Thanks

Thanks to everyone that helps me share this plugin with others. Special thanks to the blogs that wrote about us: CSS Globe, Revolução Etc, Pinceladas da web, Profissionais TI, HTMLStaff, And After, Speedy DevSystems.

Thanks to Flávio Silveira for start coding the limit.
Thanks to Franciel Dors for the idea of centsLimit.
Thanks to Ricardo Mendes for the idea of clear prefix on blur.
Thanks to Carlos Vinicius e Rayron Victor for suggest corrections to the keypad.
Thanks to Cagdas Ucar for start coding the allowNegative.
Thanks to Rodrigo Batista for the idea to allow del button.
Thanks to Vlaube e Camilo Arthur for a solution to compress the script with YUI Compressor and Closure Compiler.
Thanks to Jereon De Jong for fixed the issue with centsLimit = 0.
Thanks to Remy Houard for the original idea on Plus Sign.

Thanks to Kaihua Qi for start coding the plugin with the use of the keydown event; and thanks to Thasmo, that helped me to fix the keypad issue.

Thanks to Icojoy for the icons used in this page.

Want contribute?

Developers

Fork the code on github and help us on development.

Translators

Contact me and ask about the translation file to help people from another countries to use our plugin.

Contact

This project is now maintened for me, Flávio Silveira.
You can find me right now on Twitter or send an email to flavioaugustosilveira@gmail.com.