onBlur Olayı (Event)

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.

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

İlgili Başlıklar