Javascript Klavye Olayları
Hepinize merhaba dostlarım :). Bu yazımda sizlere javascript programlama dilinde klavye olaylarından (keyboard events) bahsedeceğim. Zaman zaman bazı yerlerde bazı projelerde kullanılan ve internet sitelerinde çoğu kez karşımıza çıkan bu olayları gelin yakından inceleyelim. Ama öncelikle ufak bir mantıksal tanımını yapalım dostlarım :)
Klavye Olay Yöneticileri (keyboard events) Nedir ?
Dostlarım mantıksal olarak düşünelim. Bir internet sitesine kayıt oluyoruz diyelim. Örneğin şifre alanına girdik yazdık şifremiz bu olsun dedik. O alandan ayrıldığımızda hemen kontrol işşlemi yapıyor büyük küçük harf vs kontrol. Önemli sorumuz şu "Bu kontrolü ne zaman yaptı ?". İşte dostlarım bunu biz o alandan ayrıldığımızda yaptı. Başka bir örnek verelim isterseniz. Biz şifre giriyoruz diyelim. Bunun minimum 8 maksimum 12 karakter olacağını varsayalım. Bu sayacı da bizim klavyede her bir tuşa vurduğumuzda ayarlaması lazım :). İşte bunlar gibi bütün olaylar javascript in bize sağladığı tatlı olaylar yani klavye olayları ile sağlanıyor dostlarım :). O halde sözü daha fazla uzatmaya gerek yok :) Hadi başlayalım
1-) onblur
Dostlarım bu klavye olayımızın amacı biz bir inputa değer girdik diyelim. Daha sonra da o alandan çıkınca bir alert göstersin veya alt kısımda bir paragrafta yazı yazdırmak istedik diyelim. İşte bu işlemi onblur klavye eventi ile yapabiliriz :). Nasıl mı dostlarım ? işte aşağıdaki gibi :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Klavye Olayları | MFSoftware Blog</title>
</head>
<body>
<input id="isim_gir" onblur="yazi()">
<p id="name"></p>
<script>
// fonksiyon oluşturalım
function yazi(){
var isim = document.getElementById("isim_gir"); // isim_gir id li input değerini alalım
document.getElementById("name").innerHTML = "İsminiz: "+isim.value; // name id li p etiketinin içine yazı basılsın (inputtan ayrılınca)
}
</script>
</body>
</html>şeklinde kodlarımızı yazdık diyelim dostlarım :). Input içerisine "Zafer" yazalım ve o inputtan ayrılınca bize aşağıdaki gibi yazı çıkacaktır :)
İsminiz: Zafer2-) onfocus
Dostlarım diğer bir methodumuz olan onfocus olayını inceleyelim. Bu methodu eğer oyunlarla aranız varsa biraz anlamışsınızdır. Focus olayını zaten çoğu yerde görmüşsünüzdür. Odaklanmak demektir. Yani basit bir işlemle input içerisinde imlecimiz varsa ve yanıp sönüyorsa o input içerisine odaklanmıştır. İşte bu olay yani onfocus input içerisine odaklanınca çalışır :). Gelin bunu da bir örnekle açıklayalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Klavye Olayları | MFSoftware Blog</title>
</head>
<body>
<input type="text" onfocus="odaklan()">
<!-- onfocus ile bu inputa odaklanınca çalıacak olan fonksiyon ayarladık -->
<script>
// fonksiyon oluşturalım
function odaklan(){
alert("İnput İçerisine Odaklanıldı"); // inputa odaklanınca çalışacak
}
</script>
</body>
</html>evet dostlarım :). Şimdi inputa tıklanınca ekranımıza gelecek yazı şudur :)
İnput İçerisine Odaklanıldı3-) onreset
Reset artık bu çağda hepimizin bildiği şey :). Başa almak veya sıfırlamak anlamına geldiğini artık hepimiz biliyoruz. Peki ama kodlamada nasıl ?
Dostlarım bu olayın amacını mantıken anlatayım. Örneğin bir kayıt formu var diyelim. Dalgınlığımıza geldi çoğu bilgiyi yanlış girdik diyelim. Bütün bilgileri gidip silmek mi daha iyi olur yoksa tek bir tuşla silmek mi iyi olur ? Tabi ki de tek bir tuş ile silmek çok güzel olur. Bunu da onreset eventi ile yapıyoruz dostlarım :). Gelin bunu da inceleyelim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Klavye Olayları | MFSoftware Blog</title>
</head>
<body> <!-- onreset ile sıfırlama işlemi yapılınca ne olacak onu yazalım -->
<form onreset="resetle()">
<input type="text"> <!-- inputumuz -->
<input type="text"> <!-- inputumuz -->
<input type="reset"> <!-- reset butonumuz -->
</form>
<script>
// fonksiyon oluşturalım
function resetle(){
// reset butouna basınca ekrana çıkacak yazı
alert("İnputların İçi Sıfırlanacak Az Sonra Benden Demesi :)");
}
</script>
</body>
</html>şeklinde kodlarımızı yazalım dostlarım ve inputlara yazılarımızı yazalım. En son olarak da reset butonuna basalım :). İlk önce ekranımıza aşağıdaki yazı gelecektir
İnputların İçi Sıfırlanacak Az Sonra Benden Demesi :)önce bu yazımızı bastıracak dostlarım daha sonra da inputların içeriğini silecektir dostlarım :).
4-) onkeydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Klavye Olayları | MFSoftware Blog</title>
</head>
<body>
<!-- inputu oluşturalım -->
<input type="text" id="tusabas" onkeydown="tusabas()">
<script>
// fonksiyon oluşturalım
function tusabas(){
// input içeriğini alalım
var text = document.getElementById("tusabas").value;
// 12 karakterden fazla ise uyarı çıksın dedik
if(text.length>=12){
alert("12 karakteri aştınız");
}
}
</script>
</body>
</html>dostlarım bu şekilde kodlarımızı yazdık. Eğer 12 karakteri aşarsa ekranımıza aşağıdaki mesaj yazacaktır
12 karakteri aştınız5-) onchange
Son olay yöneticimiz olan onchange ise dostlarım select option üzerinden herhanngi bir eleman seçtiğimiz zaman çalışacak olan olay yöneticimizdir. Kullanım alanına örnek vermek gerekirse İller listemiz olsun. Biz buradan Konya yı seçtiğimizde ekranımıza konyanın ilçelerini çekme işleminde bunu rahatlıkla kullanabiliriz :). Şimdi gelin olayın basit mantığı ile ilgili bir örnek yapalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Klavye Olayları | MFSoftware Blog</title>
</head>
<body>
<!-- select option listemizi oluşturalım -->
<select id="diller" onchange="dropsec()">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</select>
<script>
// fonksiyon oluşturalım
function dropsec(e){
var diller = document.getElementById("diller"); // select option instance oluşturduk
var deger = diller.options[diller.selectedIndex].value; // value değerini aldık
alert(deger); // ekrana değeri yazdırdık
alert("Açılır Menüden Eleman Seçildi"); // element seçildiğinin uyarısını verdirdik
}
</script>
</body>
</html>evet dostlarım :). Yukarıdaki gibi yapımızı oluşturduk. Şimdi gelelim ekran çıktılarına. Örnek olarak JAVASCRIPT seçeneğini seçelim. Ekranımıza gelecek mesajlar aşağıdakiler gibi olacaktır
JAVASCRIPT
Açılır Menüden Eleman Seçildievet dostlarım :). Olaylar tamamen bu şekilde. Klavye olay yöneticilerinin hiç zor bir yanının olmadığını sizlere rahatlıkla söyleyebiliri. Tek yapmanız gereken istikrarlı olmak ve bol pratik yapmak dostlarım :). Zaten bu olaydan sonra başarı kendiliğinden gelecektir :).
Umarım faydalı olabilmişimdir dostlarım :). Hayalleriniizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer
Zafer Yıldız
13.02.2021Her geçen gün üstüne koyarak devam ediyorsun. Tebrikler 💪
Arda Demirci
13.02.2021Çok güzel bir yazı olmuş ellerinize sağlık