Jquery Karakter Saydırma Nasıl Yapılır?

JQuery Karakter Saydırma

Bu yazımda Jquery karakter saydırma konusunu örneklerle anlatacağım. Örneklere geçmeden önce konuyu iki ana başlıkta anlatacağım ilki standart karakter saydırma (1 2 3 4 …) ikicisi ise verilen sayıdan geri saydırma.

Demo => Soru Cevap Sayfası

Jquery Karakter Saydırma (Standart)

Evet arkadaşlar öncelikle ihtiyaçlarımızı belirleyelim.

  1. Bir  textarea (bu alan inputta olabilir faketmez.)
  2. Girilen karakter sayısını basacağımız bir eleman (Ben span kullanacağım.)

Html Kodu

<textarea id="standart" maxlength="140"></textarea>
<p>Karakter sınırı <span id="s-sayim">0</span>/140</p>

Jquery Kodu

$('#standart').keyup(function () { // id'si standart olan nesne için keyup fonksiyonu
  var max = 140; // Karakter sınırı
  var len = $(this).val().length; // Textarea içine girilen değerleri say
  if (len >= max) { // eğer karakter sayısı verilen değere eşit veya büyükse
    $('#s-sayim').text('Karakter Limitini Aştınız');
  } else { // girilen karakter sayısı verilen değerden küçükse span içine sayısı ekle
    $('#s-sayim').text(len);
  }
});

İşte bu kadar arkadaşlar kod içindeki yorum satırlarına bakarsanız, çalışma mantığının çok basit olduğunu göreceksiniz.

Jquery Karakter Saydırma (Geri Sayım)

Bu yöntem standart sayım ile aynı mantıkta çalışır tek farkı ise ekstradan bir matematik işlem fazlası vardır. yani sayılan karakter sayısını verilen değerden çıkarmak. Daha iyi anlayabilmek için çalışma şekline bakalım.

Html Kodu

<textarea id="geri" maxlength="140"></textarea>
<p>Karakter sınırı 140'dır. <span id="g-sayim" style="font-weight: bold"></span></p>

Jquery Kodu

$('#geri').keyup(function () { // id'si geri olan nesne için keyup fonksiyonu
  var max = 140; // karakter sınırı
  var len = $(this).val().length;  // textarea içine girilen değerleri say
  if (len >= max) { // girilen değer verilen sınır değere eşit veya büyük ise
    $('#g-sayim').text('Karakter Limitini Aştınız');
  } else { // girilen değer verilen sınır değerden küçük ise
    var char = max - len; // sınır değerden girilen değeri çıkar
    $('#g-sayim').text(char + 'kaldı'); // g-sayim id'li nesne içine bas
  }
});

Dikkat Edilecek Hususlar

Saydırma işlemi yaptıracağınız form elemanı için mutlaka maxlength değeri kullanın.

<textarea maxlength="140"></textarea>
<input maxlength="70"></input>

Eğer bu değeri nesnenize vermesseniz arkadaşlar Jquery karakteri sayar fakat post veya get edilecek değeri sınırlamaz dolayısı ile yaptığınız düzenleme sadece görselde kalır.

CodePen Demo

See the Pen Jquery character counter by Ömer ERKAN (@omererkan) on CodePen.21587

Faydalı olması dileğilye…

Bir cevap yazın

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