Website içerisinde, mouse, klavye kullanımı durumlarında bilgi almak için, duruma göre yönlendirme veya engelleme yapmak için bu fonksiyonları kullanabilirsiniz (Girilen verinin denetimi, mouse imlecinin konumu ile ilgili bilgi alıp duruma göre müdahale etme, klavye üzerinde kısayollar verme vb.).
Website tasarımlarınızda nesneler üzerinde meydana gelen olayların tanımlanmasında ve bu olaylardan bilgi edinilmesinde, tarayıcı nesneler kullanılır, aşağıda "event" nesnesinin özelliklerini ve metotlarını inceleyebilirsiniz.
Bu yazımızda "event" nesnesinin "keyCode" ve "which" özellikleri ile ilgili bir örnek yapacağız.
Burdaki uygulama ile sadece klavye kullanarak (Basılan tuşun değerini alıp kontrol mekanizmaları hazırlayarak) websiteniz üzerindeki nesneleri kontrol ettirebilirsiniz (Sağ, sol tuşlarıyla nesne hareketlendirme, kısayollar vererek olay tetikleme gibi...).
Özellikler..
- altKey: Alt tuşuna basılıp basılmadığını (true/false) kontrol eder.
- ctrlKey: Ctrl tuşuna basılıp basılmadığını (true/false) kontrol eder.
- shiftKey: Shift tuşuna basılıp basılmadığını (true/false) kontrol eder.
- button: Farede basılan tuşa göre ilgili sayı değerini döndürür.
- keyCode: Keypress olayında klavyeden basılan tuşun ASCII kodunu verir.
- which: Klavyeden basılan herhangi bir tuşun ASCII kodunu verir.
- charCode: keypress olayında, klavyeden basılan tuşun ASCII kodunu verir.
- clientX: Pencere içerisindeki sayfa alanında fare işaretçisinin soldan uzaklığını verir.
- clientY: Pencere içerisindeki sayfa alanında fare işaretçisinin üstten uzaklığını verir.
- layerX: Katman içerisindeki fare işaretçisinin soldan uzaklığını verir.
- layerY: Katman içerisindeki fare işaretçisinin üstten uzaklığını verir.
- offsetX: Katman içerisindeki fare işaretçisinin soldan uzaklığını verir.
- offsetY: Katman içerisindeki fare işaretçisinin üstten uzaklığını verir.
- pageX: Döküman üzerinde fare işaretçisinin soldan uzaklığını verir.
- pageY: Döküman üzerinde fare işaretçisinin üstten uzaklığını verir.
- screenX: Ekranda fare işaretçsinin soldan uzaklığını verir.
- screenY: Ekranda fare işaretçsinin üstten uzaklığını verir.
- x: Pencere içerisindeki sayfa alanaında fare işaretçisinin soldan uzaklığını verir.
- y: Pencere içerisindeki sayfa alanaında fare işaretçisinin soldan uzaklığını verir.
Uygulama..
Bu örneğimizde klavyeden basılan tuşun ASCII kodunu veren bir uygulama yapacağız (Not: "internet explorer" için "keyCode", modern browserlar için "which" özelliğini kullandık).
<script type="text/javascript">
function asciiKod(event)
{
if(navigator.userAgent.indexOf('MSIE')!=-1)
{
alert("bastığınız tuşun ASCII Kodu:"+event.keyCode);
}else{
alert("bastığınız tuşun ASCII Kodu:"+event.which);
}
}
</script>
Kısaca...
- 2. "onkeypress" metodu ile tetikleyeceğimiz fonksiyonumuz.
- 4. Browser tespiti, "ie9" öncesi "internet Explorer" için "keycode", modern browserlar için "which" kullanılması.
- 6. 8. Basılan tuşun ASCII kodunun uyarı kutusu ile verilmesi.
Aşağıda uygulamanın tüm kodlarını görebilirsiniz:
<p>Klavyeden herhangi bir tuşa basınız.</p>
<input type="text" onkeypress="asciiKod(event)" />
<script type="text/javascript">
function asciiKod(event)
{
if(navigator.userAgent.indexOf('MSIE')!=-1)
{
alert("bastığınız tuşun ASCII Kodu:"+event.keyCode);
}else{
alert("bastığınız tuşun ASCII Kodu:"+event.which);
}
}
</script>
Sonuç..
Tarayıcı nesnelerden "event" uygulamalarıyla, sayfa üzerindeki nesnelerden bilgi alabilir veya nesneleri yönlendirebilirsiniz.
Website tasarımlarınızda, oluşturacağınız kontrol mekanizmalarıyla, klavye kullanarak sayfa içerisindeki nesnelere müdahale ettirebilir ve bu nesnelere olay aktarabilirsiniz.
Görüşmek üzere...
