Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

İyi günler bu konumuzda uzak masaüstü bağlantısı ve modem port ayarını anlatacağım. Normalde uzak masaüstü bağlantısı ayarını açtığımızda ye...

5 Eylül 2012 Çarşamba

Jquery .blur() özelliği

       jQuery focus odaklanılan nesneleri, kontrol etmemize yarayan bir fonksiyondur. blur ise odaklanılan nesneyi bıraktığımızda aktif olur. Örneğin input içine tıkladığınız anda focus, bıraktığınız anda ise blur aktif olur.Kullanım şekli aşağıdaki gibidir. id değeri tstint olan bir inputa nasıl uygulayacağımıza bir bakalım.

<input id="tstint" type="text" />
<label id="tstintblg"></label>
$("#tstbtn").focus();
$("#tstbtn").blur();
tstint input una focus ve blur fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri focus ve blur içinde bir function oluşturarak düzenliyoruz.
$("#tstint").focus(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

$("#tstint").blur(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});
Dilerseniz küçük bir örnek yapalım. Sayfamızda inputa odaklanıldığında ve bıraktığında label ile bilgi verelim.
$("#tstint").focus(function(){
 // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
 $("#tstintblg").html('odaklanıldı.');
});

$("#tstint").blur(function(){
 // eğer inputa odaklanılma bırakılmış ise label ile bilgi veriyoruz.
 $("#tstintblg").html('odaklanmayı bıraktınız.');
});
HTML görünüm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - blur()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tstint").focus(function(){
             // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
             $("#tstintblg").html('odaklanıldı.');
            });
            
            $("#tstint").blur(function(){
             // eğer inputa odaklanılma bırakılmış ise label ile bilgi veriyoruz.
             $("#tstintblg").html('odaklanmayı bıraktınız.');
            });
  });
    </script>
</head>
<body>
<input id="tstint" type="text" /> <label id="tstintblg"></label>
</body>
</html>

Örnek :