Twitter Tarzı Kalan Karakter Uygulaması

 bcakir
 8 Eylül 2011

Merhaba arkadaşlar bu uygulamamızda Twitter’ın kalan karakter uygulamasını yapacağız. Uygulamamız içerik girme kutucuğuna yazılan yazıların karakterini sayacak ve eğer 140 karakterden fazla ise butonu pasif duruma getirecek. Bu uygulama ile istediğiniz karakter sınırını rahatlıkla ayarlayabilir ve fazla içerik yazılmasını servera yük bindirmeden engelleyebilirsiniz. Ayrıca yapacağınız uygulamalarda, web sitelerinde, portallarda kolaylıkla kullanabilirsiniz. Bu işlem için yine JQuery kütüphanesini kullanacağız. Şimdi uygulamamızı yapmaya başlayalım.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JQuery Kalan Karakter Uygulamsi</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var ToplamKarakter=140;

function kontrol(event){
        if(event){
            var Uzunluk=$('#kutu').val().length;
            var KalanKarakter=ToplamKarakter-Uzunluk;
            if(KalanKarakter<0){
                $('#btn').attr('disabled',true);
                $('#btn').val('Kalan: '+KalanKarakter);
            }else{
                $('#btn').val('Kalan: '+KalanKarakter);
                $('#btn').removeAttr('disabled');
            }
        }
}
</script>
</head>
<body>
<textarea cols="50" id="kutu" onkeyup="kontrol(event)"></textarea><br />
<input type="submit" id="btn" value="Kalan: 140" style="width:100px;" />
</body>
</html>

Twitter tarzı kalan karakter uygulamamızı yukarıda yaptık. Eğer fazladan yazılan karakterlerin silinmesi gibi bir uygulama isterseniz de aşağıda yapacağım küçük değişiklikle bunu elde etmeniz mümkün.

if(KalanKarakter<0){
    $('#kutu').val($('#kutu').val().substr(0,ToplamKarakter));
    $('#btn').val('Kalan: '+0);
}else{
    $('#btn').val('Kalan: '+KalanKarakter);
}

Yukarıdaki kodu ana uygulamamızda uygun bölümle değiştirdiğinizde bu sefer de 140 karakterden fazlasını silen bir uygulama elde etmiş olacaksınız. Böylece uygulamamızın sonuna gelmiş olduk. Yararlı bir uygulama daha yaptığımızı düşünüyorum. Başka bir uygulamada görüşmek üzere.

 1.157 Okunma

Bu yazıya 2 yorum yapılmış.

  1. hocam eline sağlık projemde kullanıyorum ve .net kontrolleriylede entegre çalıştırınca tadından yenmez bi hal aldı 🙂 çok teşekkürler

  2. Emeğinize sağlık süper oldu valla

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat