Input Masking for indian currency In Jquery dyanamic Input field

Question

I want show masking as per the Indian currency while writing in input box.

I am using InputMask jquery for masking : https://github.com/RobinHerbots/Inputmask

I want that wherever users tries to write down amount in Text Input then it should add automatic comma as per the Indian Currency format.

I am trying to achieve that by using following code.

<input type="text" name="amount" class="amount_field"/>
$('.amount_field').inputmask("numeric", {
            radixPoint: ".",
            groupSeparator: ",",
            digits: 3,
            autoGroup: true,
            prefix: '',
            rightAlign: false,
            allowMinus: false,
            // oncleared: function () { self.Value(''); }
        });

Current Output: 2,500,000

Needed Output : 25,00,000

As per the Indian currency I needed coma first after 3 and then by 2.

Any help will be apprciated.

Which plugin you are using? Please add link in the question which details about `inputmask()` function. — techie_28, Mar 04 '19 at 09:00
This can shed some light https://github.com/RobinHerbots/Inputmask/issues/866#event-272466579 — techie_28, Mar 04 '19 at 09:10

Mayank Dudakiya · Accepted Answer · 2020-06-12T21:28:05.820

I have implement your issue with simple following you can try that.

Note: In latest version of InputMask Indian Currency style has been added. Check latest release here. : https://github.com/RobinHerbots/Inputmask/commit/5586f25853e96102417888b2cfc2823f3caa9763

<input type="text" class="inputmasking" value=""/>
<input type="text" class="inputmasking" value=""/>
<input type="text" class="inputmasking" value=""/>

<script type="text/javascript">
Inputmask("(,99){*|1}(,999){1|1}",
     {
         positionCaretOnClick: "radixFocus",
         _radixDance: true,
         radixPoint: ".",
         numericInput: true,
         placeholder: "0"
     }
 ).mask(".inputmasking");
</script>

Working example of fiddle : https://jsfiddle.net/mayanksdudakiya/58pnxjvw/

Rohit.007 · Answer 2 · 2019-03-04T11:24:54.557

1

I had created my own. Hope that useful for you too.

$(document).ready(function() {
  $(".amount_field, amount_field2").keyup(function() {
    convertToINRFormat($(this).val(),$(this));
  });
  convertToINRFormat($("#amount_field").val(),$("#amount_field"));
  convertToINRFormat($("#amount_field2").val(),$("#amount_field2"));
});

function convertToINRFormat(value, inputField) {
  var number = Number(value.replace(/,/g, ""));
  // India uses thousands/lakh/crore separators
  $('#result').html(number.toLocaleString('en-IN'));

  $('#result1').html(number.toLocaleString('en-IN', {
    maximumFractionDigits: 2,
    style: 'currency',
    currency: 'INR'
  }));

  $(inputField).val(number.toLocaleString('en-IN'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="amount" class="amount_field" id="amount_field" value="123456789" />
<input type="text" name="amount" class="amount_field" id="amount_field2" value="987654321" />

<div id="result"></div>
<div id="result1"></div>

edited Mar 04 '19 at 11:24

answered Mar 04 '19 at 08:54

Rohit.007

3,414
2
21
33

Appriciate you answer. But what if text field are in edit mode. means user have some prefilled value. then format need to be showen in correct format and masking need to be working. – Yagnik Detroja Mar 04 '19 at 10:01
what happens if more then one input field with the same class with prefilled value.? please don't use for each for that. need to write multiple time that function ??? – Yagnik Detroja Mar 04 '19 at 11:18
No you not need to write that function multiple time and no loop will be required – Rohit.007 Mar 04 '19 at 11:20
Yes that true. i was appreciated your answer. but I was looking for exact masking rule, not for the jquery blur, keyup or any event. – Yagnik Detroja Mar 05 '19 at 06:02

score 0 · Answer 3 · answered Mar 04 '19 at 08:42

0

var number = document.getElementsByClassName("amount_field")[0].value;
number.toLocaleString('en-IN');

answered Mar 04 '19 at 08:42

Xun

377
1
7

i am looking for dynamic masking, not for the static. look like this. https://codepen.io/anon/pen/exNJwj but for indian currency. – Yagnik Detroja Mar 04 '19 at 08:48
Please explain your answer. Code only answer are not always helpful to learners. Use the [edit] button to add more helpful text. – Brian Tompsett - 汤莱恩 Mar 04 '19 at 09:45

score 0 · Answer 4 · answered Mar 04 '19 at 08:58

I solved this issue with on change event :

<input type="text" name="masknumber" id="masknumber" onchange="return changeData(this.value);">
<script type="text/javascript">
function changeData(x){
    alert(x);
    x=x.toString();
    var lastThree = x.substring(x.length-3);
    var otherNumbers = x.substring(0,x.length-3);
    if(otherNumbers != '')
    lastThree = ',' + lastThree;
    var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") +  lastThree;
    document.getElementById('masknumber').value = res;
}
</script>

Input Masking for indian currency In Jquery dyanamic Input field

4 Answers4