Jquery动态输入字段中印度货币的输入掩码答案

【问题标题】：Input Masking for indian currency In Jquery dyanamic Input fieldJquery动态输入字段中印度货币的输入掩码
【发布时间】：2019-07-25 12:33:16
【问题描述】：

我想在输入框中书写时按照印度货币显示屏蔽。

我正在使用 InputMask jquery 进行屏蔽：https://github.com/RobinHerbots/Inputmask

我希望无论用户何时尝试在文本输入中写下金额，它都应该按照印度货币格式添加自动逗号。

我正在尝试通过使用以下代码来实现。

<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(''); }
        });

电流输出： 2,500,000

需要的输出： 25,00,000

根据印度货币，我需要在 3 后昏迷，然后在 2 后昏迷。

我们将不胜感激。

【问题讨论】：

您使用的是哪个插件？请在问题中添加有关inputmask()功能详细信息的链接。
这可以说明一些问题github.com/RobinHerbots/Inputmask/issues/866#event-272466579
@techie_28 谢谢，是的，这正在解决问题。

标签： javascript jquery input masking

【解决方案1】：

我已经用简单的方法解决了你的问题，你可以试试。

注意：在最新版本的 InputMask 印度货币样式中已添加。在此处查看最新版本。：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>

小提琴的工作示例： https://jsfiddle.net/mayanksdudakiya/58pnxjvw/

【讨论】：

【解决方案2】：

我已经创建了自己的。希望对你也有用。

$(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>

【讨论】：

感谢您的回答。但是如果文本字段处于编辑模式怎么办。表示用户有一些预填充的值。那么格式需要以正确的格式显示，并且需要进行屏蔽。
如果多个输入字段具有相同的类且具有预填充值，会发生什么情况。？请不要为此使用每个。需要多次编写该函数???
不，您不需要多次编写该函数，也不需要循环
是的，确实如此。我很感激你的回答。但我正在寻找确切的屏蔽规则，而不是 jquery blur、keyup 或任何事件。

【解决方案3】：

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

【讨论】：

我正在寻找动态遮罩，而不是静态遮罩。看起来像这样。 codepen.io/anon/pen/exNJwj 但对于印度货币。
请解释你的答案。仅代码答案并不总是对学习者有帮助。使用 edit 按钮添加更多有用的文本。

【解决方案4】：

我通过 on change 事件解决了这个问题：

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

【讨论】：