jQuery Price Format Plugin v. 1.3
jQuery Price Format Plugin is a plugin to format input text fields as prices. For example, if you type 123456, 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).
Version 1.3 — 16/04/2009
The issue about the keypad (v.1.2) is fixed.
Version 1.2 — 03/02/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 — 02/09/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 - 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 3 - 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 4 - 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 (02/09/2009).
Download
Remember that it is a jQuery plugin, so you have to load it after loading jQuery.
If you want some older version, v1.0, v1.1 and v1.2 still available.
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 and Speedy DevSystems .
Thanks to Flávio Silveira for start coding the limit and thanks to Franciel Dors for the idea of the parametercentsLimit.
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.
Contact
My name is Eduardo Cuducos and if you want to write me about this project, send me an email. You can know me better following me.