jQuery ile Text alanı karakter sayacı / sınırlama

jQuery ile Text alanı karakter sayacı / sınırlama

17 Şu 2015 /

jQuery ile formdaki textarea alanındaki karakterleri nasıl sınırlandırabileceğinizi ve kalan karakterleri nasıl gösterebileceğinizi anlatacağım.

Formlarınızdaki Textarea alanlarındaki karakterleri sınırlamak istiyorsanız bu yazı size çözüm olabilir. Burada anlatacağım yöntem ile hem text alanını sınırlayacak hemde yazarken anlık olarak ne kadar karakter kaldığını kullanılarınıza gösterebileceksiniz.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");
var characterLimit = 150;
google.setOnLoadCallback(function(){ $('#remainingCharacters').html(characterLimit); $('#myTextarea').bind('keyup', function(){ var charactersUsed = $(this).val().length; if(charactersUsed > characterLimit){ charactersUsed = characterLimit; $(this).val($(this).val().substr(0, characterLimit)); $(this).scrollTop($(this)[0].scrollHeight); } var charactersRemaining = characterLimit - charactersUsed; $('#remainingCharacters').html(charactersRemaining); });
});
</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Öncelikle yukarıdaki js kodunu textarea alanımızın olduğu sayfaya kopyalayıp yapıştırın. Burada

var characterLimit = 150;

satırındaki 150 sayısını istediğiniz karakter sayısı ile değiştirin.

Textarea id'sini yukarıdaki örnekteki gibi yapın.

<textarea id="myTextarea"></textarea>

Hemen altınada aşağıdaki kodu ekleyin. Hepsi bu kadar şimdi text alanında yazarken kalan karakter sayısını ziyaretçilerinize gösterebilirsiniz.

<p><span id="remainingCharacters"></span> karakter kaldı.</p>

 

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 1080 kez okundu.

Facebook Yorumları

Yorumlar

Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

guvenlik
Image Analyzer

Image Analyzer

13 Oca 2018 / Multimedya
BitDefender Internet Security

BitDefender Internet Security

13 Oca 2018 / Güvenlik
AIMP

AIMP

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Shutter

Shutter

13 Oca 2018 / Araçlar
Shutter

Shutter

13 Oca 2018 / Araçlar
Freez Flv to Mp3 Converter

Freez Flv to Mp3 Converter

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Freez 3GP Video Converter

Freez 3GP Video Converter

13 Oca 2018 / Multimedya
EssentialPIM Free Edition

EssentialPIM Free Edition

13 Oca 2018 / Ofis