Membuat currency dengan JavaScript

Membuat currency dengan JavaScript

Membuat inputan berupa nominal mata uang per seribu atau biasa disebut currency dengan JavaScript sangatlah mudah walaupun mudah tidak ada browser yang secara default menyediakan fitur currency untuk field input. biasanya currency diawali dengan simbol mata uang negara atau diakhiri dengan kode mata uang negara. Contohnya 15 ribu dalam mata uang dollar dapat ditulis dengan format $15,000 atau 15,000 USD. Mungkin kalau untuk menambahkan simbol diawal atau kode diakhir angka tidaklah sulit dalam pemrograman JavaScript, nah pertanyaannya adalah bagaimana menambahkan koma atau titik separator (pemisah) pada tiap tiap kelipatan seribu? berikut ini caranya.

Langkah pertama

Buat file baru dan beri nama file tersebut dengan nama currency.js, kemudian ketik kode berikut dalam file currency.js.

Language: javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// file currency.js
 
function currency(value, separator) {
    if (typeof value == "undefined") return "0";
    if (typeof separator == "undefined" || !separator) separator = ",";
 
    return value.toString()
                .replace(/[^\d]+/g, "")
                .replace(/\B(?=(?:\d{3})+(?!\d))/g, separator);
}
 
window.addEventListener('keyup', function(e) {
    var el = e.target;
    if (el.classList.contains('currency')) {
        el.value = currency(el.value, el.getAttribute('data-separator'));
    }
false});

Langkah kedua

Buat file baru dan beri nama file tersebut dengan nama index.html, kemudian ketik kode berikut dalam file index.html.

Language: html5
1
2
3
4
5
6
7
8
9
10
11
12
<!-- File index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   Input Price $ <input type="text" class="currency" data-separator=","/>
   <script src="currency.js"></script>
</body>
</html>

Dalam tag body terdapat 2 tag yaitu input dan script. Tag script untuk menyisipkan file JavaScript pada html. Sementara tag input untuk inputan nya. Pada tag input harus ditambahkan class currency pada attribute class-nya contoh class="currency" dan attribute data-separator bersifat opsional (boleh ada boleh tidak) dapat diisi dengan koma (data-separator=","), titik (data-separator="."), minus (data-separator="-") atau simbol lain dengan catatan jika attribute data-separator tidak didefinisikan pada input text maka secara otomatis separator atau pemisah perseribu adalah koma (,).

Contoh tampilan currency dengan JavaScript

Buka file index.html dengan browser dan setelah muncul tampilan input cobalah isikan input text tersebut dengan angka. Berikut contoh hasil inputnya.

Input Currency dengan JavaScript

Mudah bukan membuat input currency dengan JavaScript? kalau kamu mau menerapkan currency didalam website yang sudah kamu buat, cukup embed atau sisipkan kode <script src="currency.js"></script> didalam tag body dan jangan lupa tambahkan currency pada attribute class di input text-nya seperti berikut <input type="text" class="currency" data-separator=","/>