时间戳

首页 > 解决方案 > 带有千位分隔符的html输入类型编号

javascript - 带有千位分隔符的html输入类型编号

问题描述

我想在输入类型编号的 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/

标签： javascriptjquery

解决方案

这可能适合你。如果keydown它不是数字键，则阻止默认操作。On 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>

推荐阅读