Sebenarnya yang dibahas disini adalah hal yang sangat sederhana dimana saat kita memasukkan input angka, maka input langsung otomatis membuat pemisah angka ribuan dengan tanda titik. Misalkan kita mengetik angka 9000 tapi yang muncul di input menjadi 9.000. Aku punya contoh kasus seperti ini:
- Anggap saja kita buat aplikasi kasir sederhana dimana terdapat 3 input (total, bayar dan kembalian)
- Input total dan kembalian dijadikan readonly agar tidak bisa diedit
- Saat kita mengisikan input bayar, maka format angka di input tersebut akan berubah dengan adanya pemisah angka ribuan
- Saat input bayar diisi, input kembalian akan berubah otomatis berdasarkan jumlah angka yang dimasukkan di input bayar
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Formatter</title>
<style>
* { margin: 0; padding: 0; }
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
.container { margin: 50px auto; width: 80%; }
input[type="text"] {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 5px 1px;
}
table td { margin: 10px 0px; }
input[readonly] { cursor: not-allowed; }
</style>
</head>
<body>
<div class="container">
<form action="post" novalidate>
<table>
<tr>
<td style="width: 150px;"><h4>TOTAL</h4></td>
<td>Rp. <input type="text" name="input_total" id="input-total" value="" readonly></td>
</tr>
<tr>
<td><h4>BAYAR</h4></td>
<td>Rp. <input type="text" name="input_bayar" id="input-bayar" value=""></td>
</tr>
<tr>
<td><h4>KEMBALI</h4></td>
<td>Rp. <input type="text" name="input_kembali" id="input-kembali" value="" readonly></td>
</tr>
</table>
</form>
</div>
<script src="jquery-1.9.0.min.js"></script>
</body>
</html>
Tidak ada yang istimewa di kode HTML diatas, pastikan file jquery sudah dimasukkan menggunakan tag script. Di kode diatas terdapat tiga input yang saya letakkan di dalam tabel untuk mengurangi styling yaitu input-total, input-bayar, dan input-kembali. Sekarang kita masukkan kode javascript yang akan memproses input yang kita masukkan dan masukkan kode javascript ini setelah script dari jquery.<script>
// memformat angka ribuan
function formatAngka(angka) {
if (typeof(angka) != 'string') angka = angka.toString();
var reg = new RegExp('([0-9]+)([0-9]{3})');
while(reg.test(angka)) angka = angka.replace(reg, '$1.$2');
return angka;
}
// nilai total ditulis langsung, bisa dari hasil perhitungan lain
var total = 4500,
bayar = 0,
kembali = 0;
// masukkan angka total dari variabel
$('#input-total').val(formatAngka(total));
// tambah event keypress untuk input bayar
$('#input-bayar').on('keypress', function(e) {
var c = e.keyCode || e.charCode;
switch (c) {
case 8: case 9: case 27: case 13: return;
case 65:
if (e.ctrlKey === true) return;
}
if (c < 48 || c > 57) e.preventDefault();
}).on('keyup', function() {
var inp = $(this).val().replace(/\./g, '');
// set nilai ke variabel bayar
bayar = new Number(inp);
$(this).val(formatAngka(inp));
// set kembalian, validasi
if (bayar > total) kembali = bayar - total;
if (total > bayar) kembali = 0;
$('#input-kembali').val(formatAngka(kembali));
});
</script>
Kode diatas sudah saya beri beberapa komentar sehingga setidaknya sudah memberikan gambaran apa yang dilakukan pada beberapa hal yang saya anggap penting. Beberapa hal yang perlu diperhatikan adalah penambahan event onkeypress dan onkeyup pada input-bayar yang akan mengubah isi input-bayar sendiri sekaligus mengubah isi di input-kembali. Semoga posting ini bermanfaat dan terima kasih :D. Happy Coding!
