Membuat Format Rupiah pada Kolom Input

Pada saat ini kalian pasti pernah menemukan sebuah website yang memiliki fitur kolom input yang didalamnya terdapat fungsi otomatis dalam memberikan format angka khususnya mata uang. Dalam penulisan format mata uang ada terdapat kondisi peletakkan koma dan titik pada digit tertentu dan juga symbol atau karakter mata uang itu sendiri. Pada beberapa waktu lalu saya mencoba mencari cara untuk membuat fungsi tersebut yang diterapkan pada sebuah form inputan dengan bantuan javascript.
Fitur seperti ini juga bisa kalian gunakan pada project kalian agar menambahkan kesan modern dan realistis dalam penulisan format mata uang. Dalam membuat format mata uang rupiah kita akan memberikan sebuh struktur form seperti berikut.
       

<html>
<head>
    <title>Format Rupiah Dengan Javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
<div class="container">
    <h3>FORM</h3>
    <div>Tanpa Rupiah:</div>
    <input type="text" id="tanpa-rupiah"/>
    <div>Dengan Rp:</div>
    <input type="text" id="dengan-rupiah"/>
</div>
</body>
</html>

Selanjutnya kita akan  berikan CSS seperti berikut

body {
        font: 17px "open sans", "segoe ui", tahoma;
    }
    .container {
        width: 200px;
        margin: auto;
        margin-top: 15px;
    }
    input {
        padding: 5px 10px;
        font-size: 17px;
        border: 1px solid #CCCCCC;
        color: #5d5d5d;
        text-align: right;
        width: 200px;
        margin-bottom: 10px;
    }
    h3 {
        margin-bottom: 10px;
    }
    div {
        margin-bottom: 5px;
    }

Dengan struktur diatas kita sudah bisa melihat tampilan form dengan dua kolom inputan. Dimana inputan yang pertama tidak memiliki tulisan Rp pada awal format nominal, sedangkan yang kedua memiliki tulisan Rp pada awal format tulisan.
Berikut ini adalah beberapa baris kode untuk memberikan fungsi pada form yang telah kita buat.

 /* Tanpa Rupiah */
    var tanpa_rupiah = document.getElementById('tanpa-rupiah');
    tanpa_rupiah.addEventListener('keyup', function(e)
    {
        tanpa_rupiah.value = formatRupiah(this.value);
    });
    
    /* Dengan Rupiah */
    var dengan_rupiah = document.getElementById('dengan-rupiah');
    dengan_rupiah.addEventListener('keyup', function(e)
    {
        dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
    });
    
    /* Fungsi */
    function formatRupiah(angka, prefix)
    {
        var number_string = angka.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{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 : '');
    }

Baiklah teman teman dengan fungsi diatas kita sudah mendapatkan dua buah form yang siap kalian gunakan pada website kalian. Demikian artikel tentang membuat format rupiah pada kolom input. Semoga bermanfaat