DOM nesnelerinden INPUT (textarea) nesnesine ve özelliklerine kısaca değineceğiz, ve bu özelliklerin kullanımına dair küçük bir uygulama yapacağız.
Input (textarea) özellikler
- cols: Kolon sayısı
- rows: Satır sayısı
- value: İçeriği
- disabled: İçerik girilemez hale getirir.
- readOnly: Sadece okunur hale getirir
Uygulama:
Girdiğimiz karakter sayısını kontrol eden ve karakter sınırını(Bu örnekte 30) geçince içerik girmeye izin vermeyen bir uygulama yapacağız
Aşağıdaki alana birşeyler yazın, 30 karakteri geçtiğinizde bir uyarı çıkacak ve giriş engellenecektir
HTML yapısı:
<textarea id="content" name="content" onkeyup="checkChar()" onkeydown="checkChar()" rows="4" cols="40"></textarea>
<div id="report"></div>
Javascript kodları:
<script type="text/javascript">
function checkChar()
{
var allowedChar=30;
var content= document.getElementById("content");
var contLength=content.value.length;
if(contLength > allowedChar){
content.value=content.value.substring(0,allowedChar);
document.getElementById("report").innerHTML="<span style='color:red;'>UYARI: En fazla "+allowedChar+" karakter girebilirsiniz</span>";
}
}
</script>
Açıklamalar:
- 4. İzin verilecek karakter sayısı belirleniyor
- 6. İçeriğin uzunluğu tespit ediliyor
- 9. Karakter sayısı geçilince, girilen içeriğe "substring" metoduyla engelleme yapılıyor ve izin verilen karakter kadar gösterimi sağlanıyor
- 10. Girilen karakter sayısı izin verilen sayıyı geçince, "report" id'li alana uyarı mesajı gönderiliyor
Kolay gelsin, görüşmek üzere...
