"input focus"
Bootstrap 3.1.0 Snippet by muhittinbudak

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <h1 class="text-center">Input Odaklanma (`focus`) Olayı Testi</h1> <p class="lead text-center">Aşağıdaki alanlardan herhangi birine tıkladığınızda veya Tab tuşuyla geldiğinizde, hemen bir mesaj tetiklenecektir.</p> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="InputEmail">E-posta Adresiniz</label> <!-- Focus olayı bu alanda test ediliyor --> <input id="InputEmail" name="email" type='email' class="form-control input-lg" placeholder='Tıklayınız...' /> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="InputPassword">Şifreniz</label> <!-- Focus olayı bu alanda da test ediliyor --> <input id="InputPassword" name="password" type='password' class="form-control input-lg" placeholder='Buraya da tıklayabilirsiniz...' /> </div> </div> </div> <div class="alert alert-info" id="logMessage"> <strong>Durum:</strong> Henüz bir alana odaklanılmadı. </div> <div class="alert alert-warning" style="margin-top: 20px;"> <p><strong>Ek Bilgi:</strong> Alanın odağı kaybedildiğinde (başka bir yere tıklandığında) bunu yakalamak için **`blur`** olayını kullanırız.</p> <div id="blurLog">Odağın Kaybolması (`blur`) takip ediliyor.</div> </div> </div>
body { padding: 40px; background-color: #f0f8ff; } .form-control.input-lg { height: 50px; font-size: 18px; transition: border-color 0.3s; } .focused { border-color: #337ab7 !important; box-shadow: 0 0 8px rgba(51, 122, 183, 0.5); }
// Sayfa tamamen yüklendiğinde çalışacak kısım $(document).ready(function() { // 1. FOCUS (Odaklanma) Olayı // Kullanıcı input alanına tıkladığı veya Tab ile geldiği anda tetiklenir. $("#InputEmail, #InputPassword").on("focus", function(){ const elementId = $(this).attr('id'); // Log mesajını güncelle $("#logMessage") .removeClass('alert-info alert-success') .addClass('alert-primary') .html(`<strong>ODAKLANMA TESPİT EDİLDİ!</strong> (${elementId}): Veri girişi başladı.`); // Ek olarak, input alanına görsel bir efekt verelim (Bootstrap'in kendi focus stiline ek olarak) $(this).addClass('focused'); }); // 2. BLUR (Odak Kaybı) Olayı // Kullanıcı input alanından çıkıp başka bir yere tıkladığı veya Tab ile ayrıldığı anda tetiklenir. $("#InputEmail, #InputPassword").on("blur", function(){ const elementId = $(this).attr('id'); const currentValue = $(this).val(); // Log mesajını güncelle $("#blurLog").html( `<strong>ODAK KAYBI TESPİT EDİLDİ!</strong> (${elementId}) alanından çıkıldı. (Değer: "${currentValue.substring(0, 15)}...")` // Değerin bir kısmını gösterelim. ).css('color', '#8a6d3b'); // Uyarı rengini canlandıralım. // Görsel efekti kaldıralım $(this).removeClass('focused'); // Eğer değer değişmişse, burada 'change' olayını manuel olarak da tetikleyebilirsiniz, // ancak 'change' zaten odak kaybında otomatik tetiklenir (değer değişmişse). }); });

Related: See More


Questions / Comments: