DOM nesnelerinden INPUT (text-metin kutuları) nesnesine ve özelliklerine kısaca değineceğiz, ve bu özelliklerin web tasarım uygulamarındaki kullanımına dair küçük bir uygulama yapacağız.
input (text-metin kutuları) özellikler
- disabled: Sadece okunabilirlik (kutu içine yazı yazılmasına izin verilmez)
- form: //İçersinde bulunduğu form nesnesinin ismini(name) geri döndürür.
- length: //Uzunluk değeri (width)
- multiple: //Çoklu seçenek durumu
- selectedIndex: //Seçimin indeks değeri.
- size: //Ekranda kaç satır seçenek gösterileceğini belirtir.
input (text-metin kutuları) olaylar
- onblur: Kutudan ayrılınca (Örnek Kullanım: Kutuya birşey yazılıp diğer kutuya geçildiğinde bu olay tetiklenir, bu sayede, web tasarım uygulamalarınızda javascript veya ajax kullanarak kutu içinde yazılan veriyi kontrol edebilirsiniz (E-posta, kullanıcı adı vb.)
- onchange: Kutu içerisindeki veri değiştiğinde tetiklenir. (Örnek: Kutu içinde yazılan bir yazının değiştirilmesi durumunda bir uyarı göndermek isteyebilirsiniz)
- onfocus: Kutunun içine tıklandığında tetiklenir. (Örnek: Kutu içine varsayılan olarak değer koyduysanız, tıklandığında "onfocus" olayıyla varsayılan yazıyı silebilir, birşey yazılmayıp terkedildiğinde de "onblur" işlemiyle varsayılan yazınızı tekrar koyabilirsiniz).
- onkeypress(): Kutu içinde klavye ile giriş yapıldığında tetiklenir.(Örnek: Kutu içinde yazılan verilere karakter sınırlaması koyup, her karakter girildiğinde kontrol edip kalan karakteri gösterebilirsiniz)
- onselect(): Kutu içindeki veri seçildiğinde tetiklenir.
Uygulama:
Aşağıdaki gibi bir formumuz olsun, varsayılan değerler gerçekleşecek olayları gösteriyor:
HTML yapısı:
<form action="#" method="post" name="formName" id="form1" target="_self">
<table>
<tr><td>Onblur:</td><td><input type="text" id="onblur" name="onblur" size="34" maxlength="10" value="onblur: Tıkla daha sonra dışarı tıkla" onblur="checkForm(this.name);"/></td></tr>
<tr><td>Onfocus:</td><td><input type="text" id="onfocus" name="onfocus" size="34" value="onfocus" onfocus="checkForm(this.name);"/></td></tr>
<tr><td>Onkeypress:</td><td><input type="text" id="onkeypress" name="onkeypress" size="34" value="onkeypress" onkeypress="checkForm(this.name);"/></td></tr>
<tr><td>Onchange:</td><td><input type="text" id="onchange" name="onchange" size="34" value="onchange: Bu yazıyı silin!" onchange="checkForm(this.name);"/></td></tr>
<tr><td>Onselect:</td><td><input type="text" id="oncselect" name="onselect" size="34" value="Seçime işlemi yap!" onselect="checkForm(this.name);"/></td></tr>
<tr><td>Onfocus Seçili:</td><td><input type="text" id="onfocussec" name="onfocussec" size="24" value="Tıkla seçili hale gelsin!" onfocus="this.select();"/></td></tr>
</table>
</form>
Javascript kodları:
<script type="text/javascript">
function checkForm(eventName){
switch(eventName){
case "onblur":
var inputDeger=document.getElementById(eventName);
var textId=inputDeger.id;
var textName = inputDeger.name;
var textSize = inputDeger.size;
var textMaxLength = inputDeger.maxlength;
var textValue = inputDeger.value;
alert("Kutunun Özellikleri: Id:"+textId+"; Name:"+textName+"; Size:"+textSize+"; Maxlength:"+textMaxLength+"; Value:"+textValue);
break;
case "onfocus":
alert("onfocus işlemi gerçekleşti");
document.getElementById(eventName).value="Buradaki yazı da değişti";
break;
case "onkeypress":
alert("Giriş yapıldı");
break;
case "onchange":
alert("Bu yazıyı silemezsiniz");
document.getElementById(eventName).value="onchange: Bu yazıyı silin!";
break;
case "onselect":
alert("Bu yazı seçildi");
break;
}
}
</script>
Detaylı olarak açıklamayı düşünmüyorum, kodları incelediğinizde ve yazının başındaki özellik ve olay açıklamalarını okuduğunuzda konunun net bir şekilde anlaşılacağı kanaatindeyim.
ÖNEMLİ: Html yapı içerisinde olaylarla tetikleyerek çağırdığımız fonksiyonun parametre değerindeki "this" olgusuna dikatinizi çekmek istiyorum, buradaki "this" ilgili nesneyi işaret eder.
Web tasarım uygulamalarımızda sıkça kullandığımız input nesnesinin özelliklerini ve olay kontrollerini iyi öğrenmek, uygulamalarınızda bir çok kontrolü rahatça yapabilmenizi sağlayacaktır.
Kolay gelsin, görüşmek üzere...
