Youtube Channel
onFocus onBlur
onFocus, onBlur
Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onFocus ve onBlur</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// fonksiyonları tanimlayalim
function goster()
{
document.isimForm.ad.value="Adınız kayda geçmiştir."
}
function uyar()
{
document.isimForm.ad.value="Lütfen yanlışlık yapmayınız!"
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="isimForm">
<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
<BR><INPUT TYPE="text" NAME="ad" VALUE="Adınızı buraya yazınız" SIZE=25 onBlur="goster()">
<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:
<BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleğinizi buraya yazınız" SIZE=25 onFocus="uyar()">
</FORM>
</BODY>
</HTML>
Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor.