Jquery ile TextBox’ta Kalan Karakter Sayısını Hesaplama

Bu yazımda twitterdan da aşına olduğumuz karakter sayısı sınırlı olan bir input girişinde kullanıcıyı girdiği karakter sayısına göre uyaran bir jquery scripti yazacağız.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.enFazlaKarakterSayisi = 50;
        $.karakterSayisi = $("#durum").val().length;
        $.kalanKarakterSayisi = $.enFazlaKarakterSayisi - $.karakterSayisi;
        $("#kalanKarakterSayisi").text($.kalanKarakterSayisi + " karakter kaldı").css("color", "grey");
 
        $("#durum").keyup(function () {
            $.karakterSayisi = $("#durum").val().length;
            $.kalanKarakterSayisi = $.enFazlaKarakterSayisi - $.karakterSayisi;
            $("#kalanKarakterSayisi").text($.kalanKarakterSayisi + " karakter kaldı");
            if ($.kalanKarakterSayisi > 20) {
                $("#kalanKarakterSayisi").css("color", "grey");
                $("#durumGonder").removeAttr("disabled");
            }
            else if ($.kalanKarakterSayisi >= 0) {
                $("#kalanKarakterSayisi").css("color", "#5c0000");
                $("#durumGonder").removeAttr("disabled");
            }
            else {
                $("#kalanKarakterSayisi").css("color", "red");
                $("#durumGonder").attr("disabled", "disabled");
            }
        });
    });
</script>
</head>
<body>
    <div>
        <input type="text" id="durum" style="width:300px;" /><br />
        <input type="button" id="durumGonder" value="Gönder" />
    </div>
    <div id="kalanKarakterSayisi"></div>
</body>

Ekran görüntülerimiz işe şu şekilde olacaktır:

Capture1

Capture2

Capture3

Herkese iyi çalışmalar..

Yorum bırakın