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.
My.js Tutorial
- 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>
<!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" >
Anda juga bisa melakukan pengetesan fungsi-fungsi tersebut melalui Console Di Google Chrome.