View on GitHub

Jquery-maskMoney

jQuery plugin to mask data entry in the input text in the form of money (currency).

Download this project as a .zip file Download this project as a tar.gz file

Just a simple way to create masks to your currency form fields with jQuery.

Usage:

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  <script src="jquery.maskMoney.js" type="text/javascript"></script>
</head>
<body>
  <input type="text" id="currency" />
</body>
<script>
  $(function() {
    $('#currency').maskMoney();
  })
</script>

Show Time!

$("#demo1").maskMoney();

$("#demo2").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' €'});

$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});

$("#demo4").maskMoney();

<input type="text" id="demo4" data-thousands="." data-decimal="," data-prefix="R$ " />

$("#demo5").maskMoney('mask');

$("#demo6").maskMoney('mask', 1999.99);

$("#demo6").maskMoney('destroy');

var num = $('#demo8').maskMoney('unmasked')[0]; alert('type: '+ typeof(num) + ', value: ' + num)

Options:

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 prefix 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

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.

Bonus!

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('mask', 1999.99)
.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')[0], 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-symbol="R$ " data-thousands="." data-decimal="," />

And when you bind maskMoney to that field, we will read those options.

Contributors:

License:

jQuery-maskMoney is released under the MIT license.