Change the currency symbol or remove it in the inputmask currency

Question

I'm using Robin Herbot's inputmask jquery plugin and I want to change the default currency symbol (by default, its a dollar currency symbol) to a PESO currency symbol or remove the currency symbol.

Below is what I've tried, yes the symbol changes and the symbol is removed but it won't let me type anything.

$(document).ready(function(){
  
  $("#currency1").inputmask({ alias : "currency", mask : "0.00" });
  $("#currency2").inputmask({ alias : "currency", mask : "₱ 0.00" });

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<label>REMOVE CURRENCY SYMBOL</label><br>
<input type="text" id="currency1" /><br>
<label>CHANGE THE CURRENCY SYMBOL</label><br>
<input type="text" id="currency2" />

Meet

Answer 1

You can change the symbol by using the prefix option. Below is a snippet where I do this in two different ways, modifying the currency alias and defining my own alias.

In your version you couldn't type anything since the mask property is used to restrict input and setting it to 0.00 only allows those four characters to be entered and nothing else. A mask of 9.99 would allow a number followed by a period and two numbers. 9 has a special masking definition allowing any number.

Inputmask.extendAliases({
  pesos: {
            prefix: "₱ ",
            groupSeparator: ".",
            alias: "numeric",
            placeholder: "0",
            autoGroup: true,
            digits: 2,
            digitsOptional: false,
            clearMaskOnLostFocus: false
        }
});

$(document).ready(function(){
  
  $("#currency1").inputmask({ alias : "currency", prefix: '' });
  $("#currency2").inputmask({ alias : "currency", prefix: '₱ ' });
  $("#currency3").inputmask({ alias : "pesos" });

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<label>REMOVE CURRENCY SYMBOL</label><br>
<input type="text" id="currency1" /><br>

<label>CHANGE THE CURRENCY SYMBOL</label><br>
<input type="text" id="currency2" /><br>

<label>CHANGE THE CURRENCY SYMBOL, using an alias</label><br>
<input type="text" id="currency3" />

Madura

Why do you use the !0 and !1 syntax? Is false and true too common? I find it unnecessary irritating. – Gruber

@PeterVARGA I have absolutely no idea. Maybe I copy-pasted the code from somewhere and didn't notice that. Who knows, I barely remember what I did yesterday, much less five years ago. Edit: I did some googling and looks like that awful syntax has been used in some other inputmask examples as well, so copy-paste is my guess. – Madura

Thank you, no offence my friend. :-) – Gruber

Answer 2

Solution with data-inputmask attribute

$(document).ready(function(){
  $("input").inputmask();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<label>REMOVE CURRENCY SYMBOL</label><br>
<input type="text" id="currency1" data-inputmask="'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0'" style="text-align: right;"><br>
<label>CHANGE THE CURRENCY SYMBOL</label><br>
<input type="text" id="currency2" data-inputmask="'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '₱ ', 'placeholder': '0'" style="text-align: right;">

Woof