Merhabalar, bu yazımızda JavaScript Karakter Kontrolü hakkında bilgiler vermeye çalışacağım. Sitelerimizi kodlarken form ögelerinde kısıtlamalara gitmemiz gerekebilir. Örneğin bir açıklama isteriz kullanıcıdan ama en fazla 140 karakter girebilmesini isteriz. Yani roman yazsın istemeyiz. Bu yazıda bunu nasıl yapacağımızı göreceğiz.
JavaScript Karakter Kontrolü
Bu işlemi lenght özelliği ile yapacağız. Önce girilen karakter sayısını bulacak sonra da substr ile fazla karakterleri sileceğiz.
JavaScript Lenght Kullanımı
<script> var metin = "Merhaba Mustafa"; alert(metin.length); </script>
Lenght ‘i bir değişken üzerinde değil, form ögelerinde kullanacağız.
<textarea id="mesaj" cols="30" rows="10"></textarea>
Form ögesini bulmak için javascript’in document nesnesi getElementById metodunu kullanacağız.
<textarea id="mesaj" cols="30" rows="10"></textarea>
<p id="karakter"></p>
<script>
var mesaj = document.getElementById("mesaj");
mesaj.onkeyup = function() {
karakter.innerHTML = this.value.length + " karakter";
}
</script>
javascript onkeyup eventi ile texarea form ögesine girilen karakter sayısını bulabiliyoruz. Yukarıdaki kodlar da p etiketi içerisinde textarea’ya girilen karakter sayısını veriyor.
JavaScript Karakter Kısıtlama
Karakter sayısını aldıktan sonra sırada şimdi sınırlamayı yapacağız.
Yol 1
Bunun için 2 yolumuz var. İlk yol en kısa olanı. Bu da form elemanlarının kendi maxtlenght özellikleridir.
<textarea id="mesaj" cols="30" rows="10" maxlength="100"></textarea>
Bu şekilde yaparsak, kullanıcı kaç karakter girdiğini bilmez ve görmez. Bu yüzden kullanıcı dostu değildir.
JavaScript kullanarak da bu şekilde yapabiliriz.
Yol 2
Yukarıdaki örneklerin birinde karakter sayısını göstermiştik. O kodlar üzerinden ilerleyeceğiz ve 140 karakter sınırı koyarak kalan karakter sayısını kullanıcıya göstereceğiz. Aşağıdaki kodlar örneğimizin tamamını içermektedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Karakter Kontrolleri</title>
</head>
<body>
<textarea id="mesaj" cols="30" rows="10"></textarea>
<p id="karakter">140 karakter kaldı</p>
<script>
var mesaj = document.getElementById("mesaj");
var karakter = document.getElementById("karakter");
var karakterSiniri = 140;
mesaj.onkeyup = karakterKontrol;
mesaj.onkeydown = karakterKontrol;
function karakterKontrol() {
var mesajUzunluk = this.value.length;
if (karakterSiniri >= mesajUzunluk) {
var kalan = karakterSiniri - mesajUzunluk;
karakter.innerHTML = kalan + " karakter kaldı";
} else {
this.value = this.value.substr(0, karakterSiniri);
}
}
</script>
</body>
</html>
Kodlarımız bu kadardı.
JavaScript Karakter Kontrolü yazımızda bu kadardı arkadaşlar. Diğer yazılarda görüşmek üzere…. Bu sitemdeki 600. yazı oldu. Hepsini tek tek ellerimle yazdım hazırladım :D
HTML ve JavaScript hakkındaki diğer yazılarım için tıklayabilirsiniz. Linktree üzerinden bağlantılarıma ulaşabilirsiniz. İşte Burada. Derslerime özel olarak hazırladığım Github Projeme buradan ulaşabilirsiniz… C# Eğitim Seti eğitimi sayfasına gitmek için tıklayınız.
Discord’a katılmayı unutmayın.
Sağlıcakla ve kodla kalın….
Beğendim!
Harika!
İlginç!
Beğenmedim
