javascriptjqueryinput-maskjquery-inputmask

Change the currency symbol or remove it in the inputmask currency

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" />

Solution

  • 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" />