javascript - Input Masking for indian currency In Jquery dyanamic Input field - Stack Overflow

admin管理员组

文章数量:1427749

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

I am using InputMask jquery for masking :

I want that wherever users tries to write down amount in Text Input then it should add automatic ma 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 a first after 3 and then by 2.

Any help will be apprciated.

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

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

I want that wherever users tries to write down amount in Text Input then it should add automatic ma 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 a first after 3 and then by 2.

Any help will be apprciated.

• javascript
• jquery
• input
• masking

Share Improve this question Follow edited Mar 5, 2019 at 6:28 Mayank Dudakiya 3,8794040 silver badges3737 bronze badges asked Mar 4, 2019 at 8:16 Yagnik DetrojaYagnik Detroja 92911 gold badge77 silver badges2323 bronze badges 3

• Which plugin you are using? Please add link in the question which details about inputmask() function. – techie_28 Commented Mar 4, 2019 at 9:00
• This can shed some light github./RobinHerbots/Inputmask/issues/866#event-272466579 – techie_28 Commented Mar 4, 2019 at 9:10
• @techie_28 thanks yes that was resolving an issue. – Yagnik Detroja Commented Mar 5, 2019 at 6:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./RobinHerbots/Inputmask/mit/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/mayanksdudakiya/58pnxjvw/

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

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

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>

本文标签： javascriptInput Masking for indian currency In Jquery dyanamic Input fieldStack Overflow