Kullanıcı klavye üzerinde bastığı tuşları yakalayıp bu tuşlara bir görev atamak için jQuery üzerinde .keydown() ve .keyup() metodunu kullanıyoruz.
.keydown() Metoduna atadığımız görev kullanıcı tuşa bastığı ve basmayı sürdürdüğü sürece tekrarlanır.
.keyup() Metoduna atadığımız görev kullanıcı tuştan parmağını kaldırdığı an çalıştırılır.
Şimdi ufak bir örnek yapalım ve yön tuşlarına basıldığında hangi yön tuşuna basıldıysa o yön tuşu mesaj olarak bize uyarı versin.
Örnek kodumuz :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wwPHP.com</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(document).keydown(function(e){ switch (e.which){ case 37: //SOL alert("SOL YÖN TUŞUNA BASTIN!") break; case 38: //ÜST alert("ÜST YÖN TUŞUNA BASTIN!") break; case 39: //SAĞ alert("SAĞ YÖN TUŞUNA BASTIN!") break; case 40: //ALT alert("ALT YÖN TUŞUNA BASTIN!") break; } }); </script> </head> <body> Yön Tuşlarından Birine Basınız. </body> </html> |
Şimdi farklı bir örnek daha yapalım ve yön tuşları ile bir nesneyi hareket ettirelim.
Örnek kodumuz :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wwPHP.com</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" /> <style> #NESNE { width:50px; height:50px; background-color:black; border:5px solid grey; position:absolute; } </style> </head> <body> <div id="NESNE"> </div> </body> <script> $(document).keydown(function(e){ switch (e.which){ case 37: //SOL $("#NESNE").finish().animate({ left: "-=50" }); break; case 38: //ÜST $("#NESNE").finish().animate({ top: "-=50" }); break; case 39: //SAĞ $("#NESNE").finish().animate({ left: "+=50" }); break; case 40: //ALT $("#NESNE").finish().animate({ top: "+=50" }); break; } }); </script> </html> |
Bu örneğimizde hem keydown() hemde keyup() metodunu kullanacağız. Yön tuşlarından birine bastığımız an o yön tuşuna ait resmi değiştireceğiz ve hangi tuşa bastığımızı göstereceğiz.Bastığımız tuştan parmağımızı kaldırdığımız zaman ise o tuşun resmi eski haline dönecek.
Örnek kodumuz :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wwPHP.com</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" /> <style> body { background-color:black; } #NESNE { width:50px; height:50px; background-color:black; border:5px solid grey; position:absolute; } </style> </head> <body> <table> <tr> <td colspan="3" style="text-align:center;"><img id="UpKey" src="Up-Key.png" /></td> </tr> <tr> <td><img id="LeftKey" src="Left-Key.png" /></td> <td><img id="DownKey" src="Down-Key.png" /></td> <td><img id="RightKey" src="Right-Key.png" /></td> </tr> </table> </body> <script> $(document).keydown(function(e){ switch (e.which){ case 37: //SOL $("#LeftKey").attr("src", "Left-Key-Press.png"); break; case 38: //ÜST $("#UpKey").attr("src", "Up-Key-Press.png"); break; case 39: //SAĞ $("#RightKey").attr("src", "Right-Key-Press.png") break; case 40: //ALT $("#DownKey").attr("src", "Down-Key-Press.png") break; } }); $(document).keyup(function(e){ switch (e.which){ case 37: //SOL $("#LeftKey").attr("src", "Left-Key.png"); break; case 38: //ÜST $("#UpKey").attr("src", "Up-Key.png"); break; case 39: //SAĞ $("#RightKey").attr("src", "Right-Key.png") break; case 40: //ALT $("#DownKey").attr("src", "Down-Key.png") break; } }); </script> </html> |
Bu örnekte kullandığımız resimler :
