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:
Herkese iyi çalışmalar..