Dalam sebuah form yang menampilkan beberapa input angka untuk keperluan keuangan, terkadang kita perlu memberikan pemisah angka-angka tersebut agar lebih mudah dibaca dan tidak membingungkan si pengisi. Dengan menggunakan Javascript kita akan mencoba mengaplikasikan format tanda pemisah tersebut melalui beberapa function().
Sebelum pembuatan, saya akan mencoba memberikan penjelasan secara konstektual bagaimana fungsi javascript ini bekerja.
- User melakukan input di sebuah form.
- Di dalam form tersebut sudah kita sisipi atribut onkeyup dan onkeydown untuk fungsi kita
- saat melakukan input, fungsi-fungsi javascript tersebut akan membaca angka lalu diformat karena adanya onkeyup dan okeydown.
- Setiap melebihi 3 digit angka, maka fungsi akan memberikan titik diantara angka masukan.
Tutorial kali ini kita membutuhkan 2 file yaitu index.html untuk form input, dan my.js untuk pemrosesan format input tersebut. Mari kita mulai tutorialnya.
Contents
My.js Tutorial
Pertama kita download terlebih dahulu file my.js yang berisi fungsi-fungsi utama pemrosesan format angka. Silahkan di download di sini. File tersebut berisi 3 fungsi utama, yaitu :
- tandaPemisahtitik(); untuk memisahkan format dengan titik
- numbersOnly(); memvalidasi untuk masukan input adalah angka bukan karakter atau huruf.
- bersihPemisah(); menghilangkan format pemisah pada angka ketika user menghapus isian dalam input
Setelah sedikit memahami fungsi-fungsi di dalam my.js di atas, kemudian kita embedkan file javascript tersebut ke dalam index.html
<script type="text/javascript" src="my.js"></script>
Selanjutnya, kita membuat form input sederhana yang juga berisi fungsi javascript untuk alert pemrosesan dalam input. Untuk style.css Anda bisa mengubahnya sesuai keinginan. Berikut adalah index.html yang bisa Anda ketik :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Javascript Latihanku</title>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript" charset="utf-8">
function fnHitung() {
var angka = bersihPemisah(bersihPemisah(bersihPemisah(bersihPemisah(document.getElementById('inputku').value)))); //input ke dalam angka tanpa titik
if (document.getElementById('inputku').value == "") {
alert("Jangan Dikosongi");
document.getElementById('inputku').focus();
return false;
}
else
if (angka >= 1) {
alert("angka aslinya : "+angka);
document.getElementById('inputku').focus();
document.getElementById('inputku').value = tandaPemisahTitik(angka);
return false;
}
}
</script>
</head>
<body>
<div id="angka">
<div id="input">
<center><h1>Format Input Javascript</h1></center>
<input type="text" id="inputku" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);">
<input name="submit" tabindex="32" type="submit" id="submit" onclick="fnHitung()" value="Convert">
</div>
</div>
</body>
</html>
fnHitung(); yang saya masukkan di dalam file index.html tersebut dimaksudkan untuk memproses data untuk ditampilkan dalam bentuk alert. Jika anda lihat, di dalam fnHitung(); juga memanggil fungsi tandaPemisahtitik(); yang ada di file my.js, untuk melakukan validasi terhadap angka masukan.
Anda juga bisa melakukan pengetesan fungsi-fungsi tersebut melalui Console Di Google Chrome.
