Question

我想在输入类型编号的键入事件中添加千位分隔符但这只能用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/

Answer 1

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

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

下面是工作示例：

.reduce

// 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");
    });
  });
});

Answer 2

将输入类型更改为“文本”，然后将其工作

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

checkout jsfiddle

Answer 3

这可能适合您。如果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>

html输入类型编号（带千位分隔符）

3 个答案: