Skip to content Skip to sidebar Skip to footer
Home / Javascript

Membuat program Input berformat Rupiah dengan Javascript

by Nanda Krisbianto Post a Comment
Lalare IT - Dalam membuat Input dengan mata uang, kita harus bisa membuat titik untuk membedakan nilai ribuan bahkan jutaan. dan untuk membuat input mata uang tersebut, kita bisa menggunakan javascript dalam penerapanya.


CARA MEMBUAT INPUT RUPIAH DENGAN JAVASCRIPT

Dalam script ini anda akan melihat perbedaan input dengan rupidah dan tanpa rupiah, ketika kita menginput data pada input dengan rupiah sepanjang 3 karakter, otomatis akan menambahkan titik di depan karakter angka tersebut. Dan berikut adalah cara untuk membuat input Rupiah dengan JAVASCRIPT.

1.  Membuat Form Input

Untuk awal kita membuat sebuah form Input Number, dan dibawah ini adalah script untuk Form Input yang bisa kita gunakan.
<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>

2. Menambahkan Design Sederhana

Untuk memberikan kesan yang lumayan baik, berikut adalah CSS untuk design sederhananya,
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;
    }

3. Javascript Mata uang.

Dan ini adalah script yang nantinya akan memberikan nilai mata uang otomatis pada form input.
/* 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 : '');
    }

Dan sekian artikel yang bisa saya bagikan. untuk Demo hasil dari Script ini anda bisa lihat dibawah ini. Semoga apa yang saya bagikan dapat bermanfaat bagi teman-teman semua.

See the Pen Input Format Rupiah by chucky25 (@chucky25) on CodePen.

Post a Comment for "Membuat program Input berformat Rupiah dengan Javascript"