Perbedaan Antara Keydown, Keyup dan Input Pada Javascript (Jquery) Event

Halo semua, saya ingin berbagi sedikit pengetahuan mengenai javascript event terutama event keyboard. Bagi yang sudah advanced pasti pahamlah perbedaan ketiga event ini tapi bagi yang masih newbie seperti saya ini mungkin mengira ketiga event ini sama saja. Ok mari kita bahas perbedaannya.

(note: di sini saya akan gunakan jquery)

#PROLOG Mungkin beberapa dari kita pertama kali mengenal ketiga event di atas saat ingin mengambil nilai (value) dari input maupun mendeteksi tombol yang ditekan pada keyboard (keyCode).

-Contoh untuk mengambil nilai (value)

// HTML
<p id="preview_input"></p>
<input id="input" type="text">

// JAVASCRIPT
<script>
   $('#input').on('keyup', function(){
      var input = $(this).val();
      $('#preview_input').text(input);
   });
</script>

pada kode di atas kita mengatakan: "Saat keyboard ditekan di #input maka tampilkan nilai/valuenya di #preview_input". Sehingga ketika kita tekan "a" pada keyboard maka secara otomatis di #preview_input juga akan ditampilkan "a".

Sekarang coba kita ganti 'keyup' pada kode javascript diatas dengan 'input'. Apa yang kita dapatkan? Tetap sama saja hasilnya seperti gambar 1 dan 2. Sekarang coba kita ganti dengan 'keydown'. Apa yang kita dapatkan? juga hampir sama dengan dua event sebelumnya yang membedakan hanyalah pada 'keydown' value yang ditampilkan telat 1 huruf. Inilah yang kita coba pahami lebih lanjut pada tulisan ini, sebenarnya pada saat2 seperti apa kita mengunakan 'keydown, 'keyup', maupun 'input'. (Untuk mendeteksi keyCode mungkin kita bahas lain waktu karena inti persoalannya sama saja)

#KASUS Untuk memudahkan memahami perbedaan ketiga event ini saya akan ambil 1 contoh kasus, kebetulan dari kasus inilah juga saya memahami perbedaannya. Kasusnya adalah "membuat placeholder yang bisa menggunakan new line (baris baru) pada textarea". Kasus ini saya pilih karena kasus ini cukup memungsingkan, baik menggunakan Html entity di placeholder langsung, memasukkan value dari javascript ditambah break line '\n' dan sebagainya. Sebab terkadang bisa di beberapa browser tetapi tidak dibrowser lainnya, efectnya juga kadang kurang memuaskan tidak seperti efect placeholder.

#PEMECAHAN KASUS - HTML dan CSS 1. Buat wrapper untuk menampung textarea dan placeholder palsunya 2. Buat placeholder palsunya dan set posisinya dibelakang textarea 3. Buat textarea transparan agar placeholder palsunya terlihat

// CSS
<style>
#wrapper{
   position: relative;
   width: 30%;
}
#placeholder_palsu{
   position: absolute;
   z-index: -1;
   width: 100%;
   color: #999;
}
.d-b{
   display: block;
}
.d-n{
   display: none;
}
textarea{
   width: 100%;
   min-height: 50px;
   background-color: rgba(255,255,255,0);
}
</style>

//HTML
<div id="wrapper">
   <div id="placeholder_palsu" class="d-b">
      <p>1. Teks Satu</p>
      <p>2. Teks Dua</p>
   </div>
   <textarea></textarea>
</div>

Hasilnya sbb:

- JAVASCRIPT untuk memberi kesan #placeholder_palsu tersebut seperti placeholder yang biasa kita lihat maka idenya di javascript adalah: 1. Saat textarea kosong semestinya #placeholder_palsu harus muncul 2. Saat textarea tidak kosong/memiliki value maka #placeholder_palsu harus dihilangkan

<script>
$('textarea').on('keydown', function(){
   var input = $(this).val();
   if(input === ''){
      $('#placeholder_palsu').removeClass('d-n').addClass('d-b');
   }else{
      $('#placeholder_palsu').removeClass('d-b').addClass('d-n');
   }
});
</script>

silahkan ganti event 'keydown' dengan 'keyup' maupun 'input' anda akan melihat perbedaannya. Kesimpulan yang bisa diambil adalah: 1. Saat menggunakan event keydown pada kasus di atas, value yang diambil sebenarnya bukan value saat itu juga melainkan value sebelumnya. Dimana value sebelumnya memang kosong sehingga placeholder palsunya tidak langsung hilang saat itu juga, melainkan hilang setelah karakter kedua diketik. Prosesnya kurang lebih seperti ini: - Pada saat keyboard ditekan -> ambil value textarea sebelumnya -> kalau valuenya kosong munculkan placeholder palsu atau sebaliknya 2. Berbeda dengan event keyup. value yang diambil memang benar value saat itu juga tetapi proses mengambilnya adalah setelah keyboard selesai ditekan. Itulah mengapa kita bisa melihat delay sebelum placeholder palsunya hilang/muncul saat kita menekan keyboard. Prosesnya kurang lebih seperti ini: - Setelah keyboard selesai ditekan -> ambil value textarea saat ini -> kalau valuenya kosong munculkan placeholder palsu atau sebaliknya 3. Sedangkan event input ini benar2 mengambil value saat itu juga tanpa perlu menunggu keyboard selesai ditekan. Itulah mengapa kita tidak melihat delay sama sekali saat placeholder palsunya hilang/muncul. Prosesnya kurang lebih seperti ini: - Saat keyboard ditekan dan proses inputnya berhasil tampil di textarea -> ambil value textarea saat ini -> kalau valuenya kosong munculkan placeholder palsu atau sebaliknya

Singkat kata ketiga event ini sesuai namanya: - keydown berarti event saat tombol keyboard dalam posisi down (ditekan/turun) - keyup berarti event saat tombol keyboard dalam posisi up (selesai ditekan/terangkat) - input berarti event saat tombol keyboard dalam proses input/memasukkan data/huruf

Semoga bermanfaat bagi yang membutuhkan :D