onFocus

JavaScript onFocus olayı bir form elementine veya window, frame veya frameset nesnesine girildiğinde/odaklanıldığında gerçekleşir.

Aşağıdaki örnek JavaScript onFocus olay tutucuyu kullanarak form elementlerine odaklanıldığı zaman ilgili kontrol ile ilgili kısa açıklama gösterilmesini sağlar.

Kullanıcı Adı :
Şifre :

<html>
<head>
	<title>JavaScript onFocus Olay tutucu örneği</title>
<script type="text/javascript">
var AdBilgi = "Kullanıcı adınızı giriniz";
var SifreBilgi = "Şifrenizi giriniz. <br/> Lütfen şifrenizi kimseye göstermeyin.";
var GonderBilgi = "Giriş bilgilerini göndermek için butona basınız.";
function AdFocus() {
	document.getElementById('BilgiKutu').innerHTML = AdBilgi; }
	
function SifreFocus() {
	document.getElementById('BilgiKutu').innerHTML = SifreBilgi; }
	
function GonderFocus() {
	document.getElementById('BilgiKutu').innerHTML = GonderBilgi; }
	
function Gonder() {
	alert('Bilgiler gönderildi!'); }
</script>
</head>
<body>
<table>
<tr><td style="text-align:right;">Kullanıcı Adı :</td>
	<td><input id="AdGiris" onFocus="AdFocus()" type="text"></td>
</tr>
<tr><td style="text-align:right;">Şifre : </td>
	<td><input id="SifreGiris" onFocus="SifreFocus()" type="text"></td>
</tr>
<tr><td></td>
	<td style="text-align:right;"><input type="button" value="Giriş" onFocus="GonderFocus()" onClick="Gonder()">
</td></tr>
</table>
	<div id="BilgiKutu" style="color:red;"> </div>
</body>
</html>

Örnekte, onFocus olayları tetiklendiğinde kullanıcı adı metin kutusu için AdFocus, şifre girişi metin kutusu için SifreFocus fonksiyonları çağırılacak şekilde aşağıdaki gibi tanımlanmıştır.

Bunlar haricinde Gönder butonuna odaklanıldığı zaman uyarı göstermek için GonderFocus, butona basıldığı zaman uyarı göstermek için Gonder fonksiyonları tanımlanmıştır.

Metin kutularına girildiği zaman onFocus olayları tetiklenecek ve ilgili fonksiyonlar çağırılarak uyarı gösterilecektir.

Eğer olay tutucuları öğrenmeye çalışıyorsanız, bu örneği onBlur ve onChange ile geliştirmenizi tavsiye ederim. Örneğin, onBlur ile metin kutularının çıkışında uyarıları temizleyen veya onChange ile değişim kontrolü yapan fonksiyonlar ekleyebilirsiniz.

İlgili Başlıklar