Just a simple way to create masks to your currency form fields with jQuery.
To get the latest(minified) version, click here.
To view a complete demonstration of it's features and usage, access our examples page!
The options that you can set are:
prefix: the prefix to be displayed before(aha!) the value entered by the user(example: "US$ 1234.23"). default: ''
suffix: the suffix to be displayed after the value entered by the user(example: "1234.23 €"). default: ''
affixesStay: set if the prefix and suffix will stay in the field's value after the user exits the field. default: true
thousands: the thousands separator. default: ','
decimal: the decimal separator. default: '.'
precision: how many decimal places are allowed. default: 2
allowZero: use this setting to prevent users from inputing zero. default: false
allowNegative: use this setting to prevent users from inputing negative values. default: false
formatOnBlur: delay formatting of text field until focus leaves the field. default: false
reverse: by default,
maskMoneyapplies keystrokes from right to left. use this setting to apply keystrokes from left to right.
selectAllOnFocus: select all text in the input when the element fires the focus event. default :false
allowEmpty: allow empty input values, so that when you delete the number it doesn't reset to 0.00. default: false
IMPORTANT: if you try to bind maskMoney to a read only field, nothing will happen, since we ignore completely read only fields. So, if you have a read only field, try to bind maskMoney to it, it will not work. Even if you change the field removing the readonly property, you will need to re-bind maskMoney to make it work.
We have 3 bonus methods that can be useful to you:
.maskMoney('destroy')removes maskMoney from an element.
.maskMoney('mask')apply the mask to your input. This method can work as a setter as well, if you pass a value to it, like this
.maskMoney('unmasked')return a float value (ex.: 'R$ 1.234,56' => 1234.56). PS: If you have only one input field, you should use this way
.maskMoney('unmasked'), since it will always return an array.
You can also configure maskMoney options using the data-* API instead of passing it as a hash in the
.maskMoney method call. To use it, simply set the options using
data-<option>, like this:
<input type="text" data-affixes-stay="true" data-prefix="R$ " data-thousands="." data-decimal="," />
And when you bind maskMoney to that field, we will read those options. ATTENTION: for settings that isn't entirely lowercase, you will need to use dashes instead of capital letters. For example, to set
allowZero, you will need to add a attribute called
To run our test suite, just clone the repo and open
test/index.html. If you want to run it using nodejs, clone the repo and run:
npm install bower install grunt test
- Aurélio Saraiva
- Raul Pereira da Silva
- Diego Plentz
- Otávio Ribeiro Medeiros
- Víctor Cruz
- Synapse Studios
- Guilherme Garnier
- Plínio Balduino
- Luis Fernando Gomes
- Gary Moore
- Daniel Loureiro
- Thiago Silva
- Guilherme Nagatomo
- Andrew Duncan
jQuery-maskMoney is released under the MIT license.