Skip to content Skip to sidebar Skip to footer

Mengenal Penggunaan Onkeydown Event Pada Javascript

Pada artikel kali ini akan beajar cara penggunaan fungsi Onkeydown buat yang belm tau, Onkeydown ialah salah satu fungsi event yang ada di javascript selain fungsi onclick, onchange, onmouseover dan onload yang telah saya bahas di artikel sebelumnya.

Fungsi onkeydown event berguna untuk membuat aksi pada sebuah elemen ketika user mengisi sebuah nilai. Fungsi in akan sangat terlihat ketka kita menggunakan input pada html. Agar lebih jelas berikut ini contoh penulisan program fungsi onkeydown didalam javascript.

Apa itu fungsi dari event onkeydown di javascript


Contoh Penggunaan Onkeydown Event Pada Javascript
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 </style>
 <title>Hardifal.com</title>

<input type="text" onkeydown="myFunction()" id="demo">

<script>
function myFunction() {
document.getElementById('demo').style.backgroundColor = "red" ;
}
</script>

</body>
</html>

Pada program diatas saya berikan sebuah aksi menggunakan onkeydown event javascript yaitu memberikan warna backround merah pada input ketika user memberikan nilai.

Hasil :
Selain onkeydown anda juga bisa menggunakan onkeyup yang berfungsi untuk memberikan aksi pada tag html ketika user menekan tombol arah (up, down, left dan right) pada keyboard.

Seperti contoh kedua penulisan onkeydown event berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 </style>
 <title>Hardifal.com</title>

<input type="text" id="demo" onkeydown="myFunctiondown()" onkeyup="myFunctionup()">

<script>

 function myFunctionup(){

 document.getElementById('demo').style.backgroundColor = "blue";
 }

 function myFunctiondown() {
 document.getElementById('demo').style.backgroundColor = "red" ;
}

</script>

</body>
</html>

Hasilnya akan sama seperti program pertama diatas yakni memberikan aksi ketika user memberikan sebuah nilai. Namun, jika anda jalankan program diatas akan memberikan aksi juga ketika menekan tombol arah atau tombol lainnya pad keyboard komputer anda.

Pelajari juga event lainnya :

Post a comment for "Mengenal Penggunaan Onkeydown Event Pada Javascript"