JavaScript onBlur olayı (event), ilgili elementin içinden çıkılarak, odaklanmasını (focus) kaybettiği zaman tetiklenir. HTML onBlur özelliği element üzerinde blur olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.
HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.
HTML Sözdizimi
<element onblur="betik" > ... </element>
DOM Sözdizimi
element.onblur = fonkBetik;
betik = element.onblur
| betik | onblur olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir. |
| fonkBetik | onblur olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir. |
Dönüş Değeri
| betik | Fonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner. |
Örnek
Aşağıdaki örnek, JavaScript onBlur olay tutucu kullanarak input-text kontrolüne girilen değerin çıkışta bir metin mi yoksa rakam mı olduğunun kontrol edilmesini göstermektedir. Bu kontrol öntanımlı isNaN fonksiyonu ile yapılır. isNaN fonksiyonu aldığı parametre rakam değilse true döndürür.
<html>
<head>
<script type="text/javascript">
function GirisKontrol()
{
var UyariNesne = document.getElementById('Uyari');
var TextNesne = document.getElementById('TextGiris');
if(isNaN(TextNesne.value))
UyariNesne.innerHTML = "Metin girişi yaptınız!";
else
UyariNesne.innerHTML = "Rakam girişi yaptınız!";
}
</script>
</head>
<body>
<p>Sadece rakam veya harf girişi yapınız.</p><br />
<input id="TextGiris" name="TextGiris" type="text" onblur="GirisKontrol();">
<span id="Uyari" style="color:Red;"> </span>
</body>
</html>
Canlı Sonuç
Rakam veya harf girişi yaparak, kontrol içinden çıkınız.
Örneğin, gövde (body) kısmında, onBlur olay tutucusu tetiklendiği zaman Script kısmındaki GirisKontrol fonksiyonunu çağırması için aşağıdaki gibi tanımlanmış bir Textbox ve dinamik uyarı göstermek için bir span elementi bulunmaktadır.
<input type="text" .... onblur="GirisKontrol();">
onBlur, tetiklendiği zaman GirisKontrol fonksiyonu çalışır ve textbox içindeki değer isNaN ile kontrol edilerek, UyariNesne olarak tanımlanmış span elementi içine innerHTML kullanılarak sonuç yazılır.
Elementler
blur olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri
A (Anchor) | AREA | BUTTON | INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | LABEL | MARQUEE | OPTGROUP | OPTION | SELECT | TEXTAREA