jQuery karakter sayacı

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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir