Artikel ini dapat digunakan, disalin, dan disebarluaskan. Cukup cantumkan sumber asli. Jika isinya mengandung kebenaran, semoga memberi kebaikan bagi kita yang memanfaatkannya. Jika ada yang salah, mohon kiranya penulis dimaafkan. Dan sangat baik, jika kesalahan tersebut dapat diberitahukan kepada penulis.
Yanmarshus, 26 Oktober 2005, yan[at]daunsalam[dot]net

Format Angka dengan JavaScript

Input textbox pada HTML, adalah sebuah form input yang cukup sederhana. Karena sederhana, maka apa yang kita tulis dalam textbox tersebut, maka demikian pula tampilnya. Kalau untuk teks sederhana, seperti nama, alamat email, nomor telepon, tentu textbox ini sudah cukup memadai.

Namun, ketika kita memasukkan angka, maka bentuk textbox sederhana seperti ini agak kurang membantu. Kalkulator adalah salah satu contoh yang menarik dalam menampilkan angka yang kita tulis melalui keypad-nya. Sebagian besar kalkulator bisa menampilkan tanda pemisah untuk setiap 3 angka (thousand separator). Dengan adanya pemformatan seperti ini, kita lebih mudah dalam melihat angka yang kita tulis.

Atas model seperti di atas, maka saya membuat sebuah fungsi dalam JavaScript yang bisa memformat angka yang dimasukkan dalam textbox secara realtime. Angka akan diformat dengan memberi pemisah ribuan, saat kita mengetikkan angka tersebut.

Fungsinya cukup sederhana. Nilai (value) yang ada dalam textbox akan diambil oleh fungsi. Kemudian dengan regex, semua yang tidak berupa angka dihapus. Setelah itu dilakukan pemformatan untuk menambahkan tanda pemisah untuk setiap 3 angka. Hasil pemformatan ini dikembalikan ke textbox yang bersangkutan. Fungsi formatangka ini akan dieksekusi setiap sebuah tombol selesai ditekan, yaitu dengan event onkeyup.

Ketika data dikirim, maka script yang menerima variabel ini, perlu membersihkan dulu data yang dikirim dari karakter yang digunakan sebagai pemisah ribuan. Atau dapat juga memanfaatkan JavaScript lagi sebelum form di-submit.

Agar angka dalam textbox rata kanan, maka digunakan CSS untuk menjadikan teks dalam textbox menjadi rata kanan. Untuk contoh lengkap, silahkan lihat script di bawah. Hasil dari script ini bisa dicobakan pada textbox berikut ini. 


<html>
<head>

<style>
.ratakanan { text-align : right; }
</style>

<script language="JavaScript">
function formatangka(objek) {
   a = objek.value;
   b = a.replace(/[^\d]/g,"");
   c = "";
   panjang = b.length;
   j = 0;
   for (i = panjang; i > 0; i--) {
     j = j + 1;
     if (((j % 3) == 1) && (j != 1)) {
       c = b.substr(i-1,1) + "." + c;
     } else {
       c = b.substr(i-1,1) + c;
     }
   }
   objek.value = c;
}
</script>

</head>
<body>

<form name="f">
<input type="text"
       name="a"
       onkeyup="formatangka(this)"
       class="ratakanan">
</form>

</body>
</html>