JQuery Price Format
- english
- portuguese
jQuery Price Format 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).
Versions
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 - 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.
Example 5 - 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 6 - Allow Negatives
JavaScript
$('#example6').priceFormat({
allowNegative: true
});
Result
The default value of allowNegative property is false. Obviously, zero values are not negative.
Example 7 - Add Suffix
JavaScript
$('#example7').priceFormat({
prefix: '',
suffix: '€'
});
Result
The default value of suffix is empty.
Exemplo 8 - 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.
Download
ATTENTION!!
The official jquery plugin site is currently unavailable.
Meanwhile, download jquery price format from our site, or fork us in git hub.
jquery.price_format.1.7.js
jquery.price_format.1.7.min.js
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});
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 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
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.