UX Rocket Text Limit

<input type="text" class="textlimit" maxlength="50" />
<input type="text" class="textlimit" maxlength="15" data-visible="false" placeholder="Kalan karakter sayısı dilenirse gizlenebilir" />
<textarea class="textlimit" rows="5" maxlength="250"></textarea>

Notlar

Karakter sayısı kolay bir şekilde maxlength attribute değeri ile tanımlanmaktadır.

Kalan karakter sayısı görünür durumdayken, içerik alanlarının genişliği, kalan sayının gösterilmesi için normal tanımlandıkları genişlikten 10% daha kısadırlar. Kalan sayısı gizlendiği durumlarda ise normal genişliktedirler.

Önemli (textlimit tanımlarını güncelleme işlemleri)

Textlimit plugininin çalışma şeklinin tanımları data attributeleri ile yapıldığı durumlarda, güncelleme sırasında $(".textlimit").attr('data-visible', false) şeklinde yapılacak tanımlama işlemleri textlimiti güncellemeyecektir. data attribute güncellemelerinin data() fonksiyonu ile yapılması gerekmektedir.

var $textlimit = $(".textlimit");
// Yanlış güncelleme 
$textlimit.attr('data-visible', false);
$.uxtextlimit.update($textlimit); // kalan sayısı görüntülenmeye devam edecektir

// Doğru güncelleme
$textlimit.data('visible', false);
$.uxtextlimit.update($textlimit); // kalan sayısı gizlenmeye başlayacaktır

Yukarıda belirtilen örnek ve güncelleme kullanımları data attribute ile belirlenen bütün textlimit özellikleri için geçerlidir.

Tanımlar

Property	Default	Açıklama
maxLength	0	Karakter sayı limiti. 0 iken, limit yoktur.
remaining	.remaining	Kalan karakter sayısının gösterildiği alan için css classı.
visible	true	Kalan alanının görünür olup olmayacağını belirler

Data Attribute
maxlength	data- ön eki olmadan maxlength="123" şeklinde alan için olan karakter sayı limitini belirler.
remaining	Kalan karakter sayısının gösterildiği alan için css classı.
visible	Kalan alanının görünür olup olmayacağını belirler

Callback
onReady	TextLimit, form elemanına bağlandığında çalışacak fonksiyonu çağırır.
onLimit	Alana girilebilecek maksimum karakter sayısına ulaştığında çalışacak fonksiyonu çağırır.
onUpdate	Textlimite ait instance güncellendikten sonra çalışacak fonksiyonu çağırır.
onRemove	Textlimite ait instance sayfadan kaldırıldıktan sonra çalışacak fonksiyonu çağırır.

Public Metodlar

Method	Açıklama
$(selector).textlimit(options)	Bu method plugini manuel olarak bir elemana bağlamanızı sağlar.
$.uxtextlimit	Bu method pluginin detayını görmenizi sağlar.
$.uxtextlimit.update(el)	Textlimit’i yeni ayarlarla günceller. el parametresi verilmemişse textlimit’i kullanan tüm elementleri günceller.
$.uxtextlimit.remove(el)	Seçilen elemanda textlimit instance bilgisini ve textlimit aksiyonlarını kaldırır. el gönderilmezse sayfadaki bütün textlimitleri kaldırır.
$.uxtextlimit.version	Sayfaya eklenmiş pluginin versiyon numarasını gösterir.