带有千位分隔符的html输入类型编号答案

【问题标题】：html Input type number with Thousand Separator带有千位分隔符的html输入类型编号
【发布时间】：2018-07-04 03:57:30
【问题描述】：

我想在输入类型编号的 keyup 事件上添加千位分隔符但这仅在 6 个字符中起作用，如果超过 6 个字符，则输入值已重置

这是我的短代码

<input type="number" id="tanpa-rupiah" step="any">



var dengan_rupiah = document.getElementById('dengan-rupiah');
    dengan_rupiah.addEventListener('keyup', function(e)
    {
        dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
    });


 function formatRupiah(bilangan, prefix)
{
    var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
        split   = number_string.split(','),
        sisa    = split[0].length % 3,
        rupiah  = split[0].substr(0, sisa),
        ribuan  = split[0].substr(sisa).match(/\d{1,3}/gi);

    if (ribuan) {
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}

这是我的小提琴https://jsfiddle.net/C2heg/4619/

【问题讨论】：

您的期望是什么？你希望它工作多少个数字？
尽可能的
这可能会有所帮助：stackoverflow.com/questions/31867551/…
问题是当数字长度大于 6 时，它会变成即 4.444.444 并且输入类型数字中的点用于小数分隔而不是千位。因此，由于一个数字不能有两个小数分隔符，所以它被丢弃了。
您应该执行 Mamun 和 VicJordan 建议的答案，但用点代替逗号。

标签： javascript jquery

【解决方案1】：

这可能适合你。在keydown 上，如果它不是数字键，则阻止默认操作。在keyup 上，解析值并更新它。使用data-属性存储并获取原始值。

var elem = document.getElementById("num");

elem.addEventListener("keydown",function(event){
    var key = event.which;
    if((key<48 || key>57) && key != 8) event.preventDefault();
});

elem.addEventListener("keyup",function(event){
    var value = this.value.replace(/,/g,"");
    this.dataset.currentValue=parseInt(value);
    var caret = value.length-1;
    while((caret-3)>-1)
    {
        caret -= 3;
        value = value.split('');
        value.splice(caret+1,0,",");
        value = value.join('');
    }
    this.value = value;
});

function showValue()
{
  console.log(document.getElementById("num").dataset.currentValue);
}

<input type="text" id="num" maxlength="30">
<button onclick="showValue()">Get Value</button>

【讨论】：

【解决方案2】：

好的，我已经在下面发布了答案。我添加了 20 个数字的限制。您可以根据需要进行更改。

您可以为此使用Number.toLocaleString()。

以下是工作示例：

// When ready.
$(function() {
  var extra = 0;
  var $input = $("#amount");

  $input.on("keyup", function(event) {

    // When user select text in the document, also abort.
    var selection = window.getSelection().toString();
    if (selection !== '') {
      return;
    }

    // When the arrow keys are pressed, abort.
    if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) {
      if (event.keyCode == 38) {
        extra = 1000;
      } else if (event.keyCode == 40) {
        extra = -1000;
      } else {
        return;
      }

    }

    var $this = $(this);
    // Get the value.
    var input = $this.val();
    var input = input.replace(/[\D\s\._\-]+/g, "");
    input = input ? parseInt(input, 10) : 0;
    input += extra;
    extra = 0;
    $this.val(function() {
      return (input === 0) ? "" : input.toLocaleString("en-US");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="amount" name="amount" type="text" maxlength="20" />

【讨论】：

这可能是一种更好的编写方式，但这里唯一真正的区别是type="text"。这就是它没有破坏的原因。
@SamVK 是的，总是尽可能地使用本机功能以获得更好的性能。 Number.toLocaleString() 非常适合此类需求。没错，主要问题是 number 需要是 text。

【解决方案3】：

改变你的输入类型等于“文本”然后它的工作

<input type="text" id="tanpa-rupiah" step="any">

checkout jsfiddle

【讨论】：

vijay 你在这里说的有什么不同？ @SamVK 在评论中已经说明了这一点。
抱歉，我没有注意到@SamVK 评论