Membuat format mata uang rupiah pada input form

JavaScript  ·  09/01/18
Gambar ilustrasi

Selain fungsi yang berjalan dengan baik, programmer perlu mempertimbangkan user experience yang baik agar aplikasi tersebut mudah digunakan oleh end user.

Salah satu user experience yang baik pada sebuah aplikasi adalah format input form yang sesuai dengan tipe data yang di-inputkan.

Contohnya apabila data yang di-inputkan berupa mata uang rupiah, maka input juga menunjukkan format rupiah. Untuk membuat format input seperti itu kita bisa memanfaatkan plugin jQuery Mask.

jQuery Mask adalah sebuah plugin jQuery yang digunakan untuk melakukan masking input, baik berupa format mata uang, nomor hp, ip address dan lain sebagainya.

Oke langsung saja, berikut adalah tutorial kustom format input mata uang rupiah.

Sebelum kita membuat kustom format input, siapkan dulu file jQuery dan jQuery Mask. Silakan download dulu file jQuery di sini dan jQuery Mask di sini .

Jika sudah lanjut ke tutorialnya.

  • Buat folder baru pada htdocs misalnya latihan.

  • Lalu copy file jquery.min.js dan jquery.mask.min.js yang sudah kita download tadi dan paste pada folder latihan.

  • Setelah itu buat file baru bernama index.html lalu isi kode di bawah ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Custom Format pada Input Form</title>
    </head>
    <style>
        .container {
            font-family: 'Roboto', Arial, Sans-serif;
            font-size: 16px;
            font-weight: 400;
            left: 50%;
            position: absolute;
            top: 0;
            transform: translate(-50%, 5%)
        }
        .group {
            display: block;
            margin-bottom: 1.5em
        }
        label {
            float: left;
            width: 75px;
        }
        input {
            border: 2px solid #ddd;
            border-radius:4px;
            font-family: 'Roboto', Arial, Sans-serif;
            font-size: 16px;
            outline: none;
            padding: .5em 1em;
        }
    </style>
    <body>
        <div class="container">
            <h3>Custom Format Input</h3>
            <br>
            <form action="#" method="post">
                <div class="group">
                    <label>Rp</label>
                    <input type="text" class="uang">
                </div>
            </form>
        </div>
        <script src="jquery.min.js"></script>
        <script src="jquery.mask.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                // Format mata uang.
                $( '.uang' ).mask('000.000.000', {reverse: true});

            })
        </script>
    </body>
</html>
  • Lihat hasilnya dengan mengetikkan http://localhost/latihan/ pada browser.

Untuk kustom format lainnya bisa dilihat di sini .

Topik pos