 onFocus, onBlur eventleri
Windows ortamında çalışanlar bir pencereye tıklandığında bu pencerenin renginin değiştiğini bilirler. Bunun nedeni pencerenin kullanıcıdan komut almaya hazır olmasıdır. Kullanıcıdan aynı anda sadece bir pencere komut alabilir. Bunun için de pencerenin aktif hala geçmesi gerekir. Bu durum javascript içinde aynıdır. Mesela bir text alanına yazı yazabilmemiz için bu text alanının aktif hale gelmesi gerekir. Bir alanın aktif hale gelmesine focus bir alanın aktif hale geçtiğini belirten evente ise onFocus adıveriyoruz. Yine bir pencere focus durumundan çıktığında yani kullanıcı ile iletişimi bittiği andaki duruma ise blur, bu durumu kontrol eden evente ise onBlur adı veriyoruz. onFocus ve onBlur eventlerini text alanlarında ve texterea alanlarında kullanabiliriz. Şimdi bu konuda bir örnek görelim. Yapacağımız örnekte iki text alanı açacağız. Text alanları blur durumunda ikin yazı yazamazsınız şeklinde bir yazı yazılacak, durum focus olduğunda ise artık yazı yazabilirsiniz yazısı yazılacaktır. Bu durumu daha net bir şekilde görmek için iki text alanı kullanacağız. Öncelikle form bölümünü görelim.
<form name=focus>
<input type=text size=35 name=textalani1 onFocus="yazilir(1)"
onBlur="yazilmaz(1)">
<input type=text size=35 name=textalani2 onFocus="yazilir(2)"
onBlur="yazilmaz(2)">
</form> Formu hazırlarken öncelikle forma bir ad verdik. name parametresi ile verdiğimiz bu isim focus dur. Bu isim seçimliktir. Dilediğiniz bir ismi verebilirsiniz. Yine input parametresi ile bir text alanı oluşturduk. Bu alana da bir isim veriyoruz. Ayrıca ismin yanında onFocus="yazilir(1)" şeklinde bir tanımlama ile focus anında yazılır(deger) fonksiyonunun çalışmasını sağlıyoruz. 1 olarak kullandığımız değer ise fonksiyona hangi text alanına yazılacağını belirlemek için kullanıyoruz.
onBlur="yazilmaz(1)" şeklinde tanımlama ilede blur halinde yazilmaz(deger) fonksiyonunu çağırıyoruz. İkinci text kutusu içinde aynı tamımlamaları yapıyoruz. Burada dikkat etmemiz gereken javascriptin bir formu ve/veya form elamanını kullanabilmesi için forma ve elemanlarına mutlaka birer isim vermemiz gerçeğidir. Nesnesel bir programlama dili olan javascript formaları nesne olarak görüyor ve mutlaka bir isim verilmesini istiyor. Şimdi scriptimizi görelim.
<script>
<!--
function yazilir(hangiAlana){
if(hangiAlana==1)
document.focus.textalani1.value="Yazı yazabilirsiniz : ";
if(hangiAlana==2)
document.focus.textalani2.value="Yazı yazabilirsiniz : ";
}
function yazilmaz(hangiAlana){
if(hangiAlana==1)
document.focus.textalani1.value="Yazı yazamazsınız!!!";
if(hangiAlana==2)
document.focus.textalani2.value="Yazı yazamazsınız!!!";
}
//-->
</script> Öncelikle yazilir(hangiAlana) fonksiyonunu inceleyelim. Bu fonksiyon onFocus halinde çalışacaktır. Fonksiyona girilen geğer local hangiAlana değişkenine aktarılır. Bu değişken hangi text kususuna değerin girileceğini kontrol eder. Sonra bir kontrol bloğu bulunuyor. İlk kontrol ilk text kutusunun focus olduğunu kontrol eder. Eğer ilk text kutusu focus haline gelmişse şu işlemi yapar. Önce kısa bir açıklama; document bizim html belgemize javascriptin verdiği isimdir. <html>...</html> tagları arasında kalan bölümdür. focus ise oluşturduğumuz forma verdiğimiz isimdir. textalani1 ilk oluşturduğumuz text alanına vediğimiz isimdir ve value ise text alanının içeriğidir; yani bu alana yazılı olan ve/veya yazılacak değerdir. Bu kısa açıklamadan sonra ki nesne yapısı bölümünde daha ayrıntılı olarak görülecek yaptığımız işi görelim. if(hangiAlana==1) eğer textalani1 focus durumuna geçti ise;
document.focus.textalani1.value= sayfamızdaki focus formunun textalani1 adlı bölümünün değerini
"Yazı yazabilirsiniz : "; Yazı yazabilirsiniz : olarak değiştir. Yapılan işlem bu kadardır. Yine ikinci kontrol bloğu ise ikinci text alanının focus haline gelmesi durumunda aynı işlemi yapacaktır. İkinci fonksiyonumuz olan yazilamaz(hangiAlana) fonksiyonu da aynı mantıkla çalışır. Text alanı blur haline geldiğinde bu fonksiyon çalışır ve blur haline gelen textalanına Yazı yazamazsınız!!! uyarısını yazar. Peki ne işimize yarayacak focus ve blur durumları. Bu program yazarken bize yardımcı olacaktır. Bazı durumlarda açıklama yapmak, bazı durmlarda ise bir alanın işaretlendiği anı tespit etmek ve hemen bir müdahale yapmak için kullanabiliriz. Meselan bir alan focus durumuna geçtiğinde yeni bir pencere açabilir ve blur durumuna geçtiğinde bu pencereyi otomatikman kapatabiliriz. focus durumuna geçildiğini bir mesaj olarak verebiliriz gibi. Şimdi bu konuyla ilgili örneğimizi deneyelim. Dikkat ettiyseniz yazı yazılacak hale gelen kutuya Yazı yazabilirsiniz : uyarısı yazılıyor. Blur durumuna düşüldüğünde ise Yazı yazamazsınız!!! uyarısı yazılıyor. İki textalanı da blur haline düştüğünde; bunu sayfanın boş bir yerini tıklayarak veya başka bir pencereyi tıklayarak görebiliriz; iki textalanınada Yazı yazamazsınız!!! uyarısı yazılacaktır.
 |
Javascript 
Bu içeriğe ait yorumları masaüstüne alabilirsiniz
