Focus ve Blur Fonksiyonu

Bu dersimizde focus ve blur fonksiyonlarını açıklayarak bir de örnek uygulama yaptık.

Bu dersimizde focus ve blur fonksiyonlarını açıklayarak bir de örnek uygulama yaptık.

Focus fonksiyonu odaklama anlamına gelmektedir. Herhangi bir nesneye tıklandığında içine yazdığınız kodlar devreye girer.

Örnek:


$("selector").focus(function(){

   // içine yazacağınız kodlar

});



Focus odaklanmasını kaybettiği zaman çalışacak kodlardır.

Örnek:


$("selector").blur(function(){

   // içine yazacağınız kodlar

});



Aşağıdaki uygulamada bir kullanıcı giriş paneli hazırladık ve içindeki input'lara tıklandığında value (değer)'leri sıfırlanıyor ve başka bir yere tıklandığındaı içindeki yazı tekrar aktif oluyor.

index.html sayfası kodları


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>Focus ve Blur Fonksiyonları</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">

    

        $("document").ready(function(){

                $(".kg_txt").focus(function(){ // bu satırda .kg_txt classlı inputta odaklanıyoruz bunu [focus] 



sayesinde yapıyoruz

                        $(this).val(""); // bu satırda içindeki valuesini sıfırlıyoruz

                });

                $("input:eq(0)").blur(function(){

                        $(this).val("Kullanıcı Adı Giriniz");

                });

                $("input:eq(1)").blur(function(){

                        $(this).val("Şifre Giriniz");

                });

        });    



</script>

</head>

<body>

    

    <div id="genel">

    <p>Kullanıcı Giriş Paneli</p>

        <input type="text" class="kg_txt" value="Kullanıcı Adı Giriniz"/>

        <input type="text" class="kg_txt" value="Şifre Giriniz"/>

        <input type="submit" class="kg_btn" value="Giriş Yap"/>

    </div>

    <div id="imza">Sanalkurs | Yasin Elbüz</div>

    

</body>

</html>



style.css sayfası kodları:


body{background:#efefef; font-family:verdana; font-size:12px;}

#genel{width:300px; padding:10px; background:#fff; margin:auto; border:1px solid #bcbcbc; border-bottom:2px solid #bcbcbc;}

#imza{width:300px; padding:5px; margin:auto; font-family:arial; font-size:12px; text-align:right; color:#656565}

.kg_txt{padding:5px; width:288px; height:18px; margin-top:3px; border:1px solid #a4a4a4; font-family:arial; font-size:12px;  



font-style:italic; color:#767676;}

.kg_btn{width:100px; height:25px; background:#D4D4D4; border:0px; margin-top:5px; color:#2F2F2F; cursor:pointer;}

p{background:#bcbcbc; color:#656565; margin:0px; padding:5px; width:137px; font-weight:bold;}



Yararlı olması dileğiyle, iyi çalışmalar...
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

evet o kısım da ufak bir mantık hatası var aslında onu çözmekte çok kolay. [code]<input type="text" value="Kullanıcı Adı"/>[/code] şöyle bir inputun oldugunu varsayalım ki var zaten :) valuesinin içindeki değerle birlikte kontrol ettiriyoruz. [code] $("input").focus(function(){ var deger = $("input").val(); if(deger == "Kullanıcı Adı"){ $("input").val(""); } }); [/code] Yukardaki kod şunu ifade ediyor ilk önce inputun içindeki değeri aldık bunu[code]val()[/code] fonksiyonuyla yapıyoruz ve bir koşul sunuyoruz inputun içindeki değer Kullanıcı Adına eşitse inputun içindeki değeri sıfırlıyoruz değilse öylece bırakıyoruz

Yukarı Git