<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>
// 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).
});
});
