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.
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.
