<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;">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="RezervAlan">Rezerv Alanı (RezervAlan)</label>
<!-- Bu alan için klavye olayı test ediliyor -->
<input id="RezervAlan" name="RezervAlan" type='text' class="form-control input-lg" placeholder='Bir şeyler yazın...' />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="NemaOran">Nema Oranı (NemaOran)</label>
<!-- Bu alan da aynı olayı dinliyor -->
<input id="NemaOran" name="NemaOran" type='text' class="form-control input-lg" placeholder='Buraya da yazın...' />
</div>
</div>
</div>
<hr>
<div class="alert alert-success" id="logMessage">
<strong>Sonuç:</strong> Input alanlarına her tuş bastığınızda (veya tuşu bıraktığınızda) aşağıdaki mesaj kutusu güncellenecektir.
</div>
</div>
body { padding: 50px; background-color: #f8f9fa; }
// Sayfa tamamen yüklendiğinde çalışacak kısım
$(document).ready(function() {
// 'keyup' olayı, klavyede bir tuşa basılıp bırakıldığı anda tetiklenir.
// Bu, anlık tepki için en ideal çözümdür.
$("#RezervAlan, #NemaOran").on("keyup", function(){
// alert(1); // Art arda alert açılması kullanıcı deneyimini bozar.
// Konsola veya bir log alanına yazdırmak daha iyidir.
const elementId = $(this).attr('id');
const currentValue = $(this).val();
console.log("Keyup: " + elementId + " alanında değişiklik tespit edildi.");
$("#logMessage").html(
`<strong>Değişiklik Tespit Edildi!</strong> (${elementId}):
Güncel değer: <strong>${currentValue}</strong>`
).removeClass('alert-success').addClass('alert-info');
});
// İpucu: Eğer kopyala/yapıştır veya sürükle bırak gibi işlemleri de yakalamak istiyorsanız,
// olayı şu şekilde kullanabilirsiniz: .on("input keyup", function(){ ... });
});
