jQuery ile hazırladığım “Kalan Karakter” eklentisi
jQuery ile eklenti hazırlamanın önemli bir nedeni de değişik projelerde ihtiyaç duyulan aynı kodları, her seferinde kopyala-yapıştır yapmaktan kurtulmaktır. Ben de textarea gibi metin alanlarında kullandığım ve ziyaretçilerin kaç karakterlik yazı yazabileceklerini gösteren kodları bir eklenti haline getirdim. Eklentiye de Kalan Karakter ismini verdim 
Eklentinin özellikleri nelerdir?
- Textarea ve Input gibi metin alanlarında kullanabilirsiniz
- Karakter limitini istediğiniz gibi belirleyebilirsiniz
- Ziyaretçiye gösterilecek mesajı istediğiniz gibi yazabilirsiniz
- Ziyaretçiye gösterilecek mesaj için DIV gibi veya SPAN gibi istediğiniz bir HTML etiketi kullanabilirsiniz
- Kullanımı çok kolaydır ve yalnızca 1 KB boyutundadır
Eklenti nasıl kullanılıyor?
Önce eBurhan Araçları sayfasından eklentiyi bilgisayarınıza indirin. İndirdiğiniz dosya içerisindeki "jquery.kalanKarakter.js" dosyasını jQuery kütüphanesi ile birlikte web sayfanıza alttaki gibi bağlamalısınız.
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript" src="jquery.kalanKarakter.js"></script>
Bu işlemden sonra eklentiyi kullanmaya başlayabiliriz. Diyelim ki web sayfamızdaki bir iletişim formunda, ID özniteliği mesaj olan bir textarea elemanı bulunsun. Alttaki gibi:
-
<textarea id="mesaj" cols="25" rows="5"></textarea>
Bu metin alanına 50 karakterlik bir limit koymak için yazmamız gereken kodlar şöyle olmalıdır:
-
$('textarea#mesaj').kalanKarakter({
-
limit: 50,
-
mesaj: 'kalan karakter: #1',
-
kapsa: '<div></div>',
-
uyari: function(){
-
alert('karakter limiti aşıldı !');
-
}
-
})
İşte hepsi bu kadar Çalışır halini görmek için demo sayfasına bakabilirsiniz.
Eklentinin hangi seçenekleri var?
Yukarıdaki örnek uygulamada limit, metin, kapsa, uyari gibi seçenekler kullandık. Bunlar, eklentinin seçenekleridir ve 4 tanedir. Bu seçenekleri tanımlamak zorunda değilsiniz zira tanımlamadığınız zaman varsayılan ayarlar kullanılacaktır ve eklenti çalışmaya devam edecektir. Şimdi bu 4 adet seçeneğe kısaca gözatalım:
- limit: metin alanına toplam kaç karakter yazı yazılabileceğini tanımlar. 500, 1000 gibi sayısal değerler verilmelidir. Varsayılan değeri 250 olarak tanımlıdır.
- mesaj: metin alanının altında veya yanında ziyaretçiye gösterilecek olan mesajı tanımlar. #1 parametresi, limit seçeneğinin değerini işaret eder.
- kapsa: mesajın gösterileceği alan için kullanılacak olan HTML etiketini tanımlar. DIV, SPAN veya EM gibi etiketler kullanabilirsiniz fakat etiketin başlangıçını ve bitişini mutlaka belirtmelisiniz. Örneğin etiket olarak EM kullanacaksanız bu seçeneğe
<em></em>şeklinde bir değer girmelisiniz. Ayrıca bu etikete class ataması da yapılabilir. Örnek vermek gerekirse<em class="kalanKarakter"></em>formatında bir değer girebilirsiniz. Böylece CSS kullanarak mesaj alanını kolayca biçimlendirebilirsiniz. - uyari: karakter limiti aşıldığında bir fonksiyonun çalıştırılmasını sağlar. Örneğin bu seçenek ile "alert()" gibi javaScript fonksiyonlarını kullanarak ziyaretçiyi uyarabilirsiniz veyahut Css Message Boxes gibi uygulamaları tetikleyebilirsiniz.
Sonuç
Eklentinin kurulumu ve kullanımı çok kolay fakat yine bir video sunumu hazırladım.
Alttaki ekran görüntüsüne tıklayarak videoyu online izleyebilirsiniz ve Kalan Karakter eklentisini daha yakından tanıyabilirsiniz. Eklentinin faydalı olması dileğiyle...
yine güzel bir çalışma teşekkürler. ancak asp dilini kullandığım için tr karakter hatası verir mi?
Gerçekten işe yarayacak bir eklenti. Sağol. Forumlarda imza boyutu vb. bunla düzenlenebilir.
Çok güzel elinize sağlık. Keşke kodları packed etmeseydiniz biz de bakardık. Aslında bir tane de yorumlu olanı olsa çok güzel olur. Bu video işi tuttu galiba
@sinan
bu eklenti asp’ye veya php’ye bağlı değil. O yüzden karakter sorunu oluşturmaz.
@HMERT
eklentiyi indirdiğinde göreceksin ki bir tane “jquery.kalanKarakter.dev.js” dosyası var. bu dosyada herşey açık, paketlenmiş birşey yok.
pardon ben demodan bakmıştım…
Eline sağlık üstad, bu aralar çok iyi gidiyorsun. Durmak yok
hocam peki bunu mesaj kutularına nasıl ayarlayacağız?
@sinan
Bunu video‘da adım adım anlatmıştım.
Merhaba sitenizin takipçisiyim. Gerçekten çok hoş ve işe yara bilgiler veriyorsunuz. Teşekkürler.
Adaş, Adobe Dreamweaver’ın kod yazarken ne kadar da hızlandırıcı olduğunu bu video ile hatırlamış oldum. Hemen bir yerlerden tedarik ediyorum :))
Ayrıca bu video işini cidden sevdim. Bundan sonra ben de kullanayım.
İyi çalışmalar.
tamam hocam unutmuşum.