jQuery kullanarak Twitter ve diğer çoğu site gibi metin kutularına bir sayaç ekleyebilirsiniz. Yorum alanları, form alanları gibi alanlarda bu basit kodu kullanabilirsiniz. Maksimum girilebilecek karakter sayısını kodun içindeki ilgili yerde değiştirin ve diğer bütün ayarlamaları kendisi yapsın :) jQuery ile karakter sayacı arayanlar için birebir olduğunu düşündüğüm kodu aşağıda sizinle paylaşıyorum. İstediğiniz yerde kullanabilirsiniz.
Kodun jQuery kütüphanesi gerektirdiğini hatırlatmama gerek olmadığı düşüncesindeyim. Ve düzgün şekilde çalışması için document.ready() fonksiyonu içerisinde kullanılmalı. Öncelikle kodu inceleyelim. Sonrasında size örnek bir kodlama ve örnek bir sayfa aktaracağım.
Kod
var makskarakter = 1500; //Kişinin girebileceği maksimum karakter limiti
var count = $('#karaktergirdi').val().length;
var char = makskarakter - count;
$('#kalankarakter').text(char + " karakter kaldı");
$('#karaktergirdi').keyup(function () {
var len = $(this).val().length;
if (len >= makskarakter) {
$('#kalankarakter').text("Maksimum girilebilecek karakter sayısına eriştiniz!");
} else {
var chardiff = makskarakter - len;
$('#kalankarakter').text(chardiff + " karakter kaldı");
}
}); Bu alanda şunu açıklamama izin verin;
#kalankarakter : Kalan karakter sayısını gösterecek span veya div elementinin idsi
#karaktergirdi : Karakterin sayılacağı metin kutusu girdisi
Örnek Kodlama
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>jQuery Karakter Sayacı (Örnek) - WpAdamı</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var makskarakter = 1500; //Kişinin girebileceği maksimum karakter limiti
var count = $('#karaktergirdi').val().length;
var char = makskarakter - count;
$('#kalankarakter').text(char + " karakter kaldı");
$('#karaktergirdi').keyup(function () {
var len = $(this).val().length;
if (len >= makskarakter) {
$('#kalankarakter').text("Maksimum girilebilecek karakter sayısına eriştiniz!");
} else {
var chardiff = makskarakter - len;
$('#kalankarakter').text(chardiff + " karakter kaldı");
}
});
});
</script>
</head>
<body>
<textarea id="karaktergirdi" cols="80" rows="10"></textarea><br />
<span id="kalankarakter"></span>
</body>
</html> Örnek
Selametle