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.
Anlatım güzel yalnız indirdiğimiz .js dosyaları sorunlu, hata veriyor jquery tanımsız sorunu çıkıyor ben sorunu çözdüm ama diğer indirecek olan arkadaşlar böyle bir sorun ile karşılaşmadan dosyayı günceleyebilirseniz çok iyi olur…
Affınıza sığınarak ben bir iki düzeltme söylemek istiyorum.
1. jquery inin sitesinde plugin yazarken başka bir kütüphane kullanımı ihimaline karşın “$” yerine “jQuery” kullanın diyor.
2. $this = $(this);
gibi bir ifade ile nesnemizi alıyoruz fakat $this değişkeni global oluyor ve birden fazla plugin aynı şekilde yazılırsa $this ifadeleri karışıyor. bu durum bana yaklaşık iki saat saç baş yoldurdu.
makaleniz jquery de plugin yazımı açısından çok güzel ve açıklayıcı. devamını dilerim.
Eline sağlık artık sitenin devamlı müşterisiyim daha öğreniceğim çok şey var sizden sağolun
hocam ellerinize sağlık.
bende farkettiğim bir eksikliği belirtmek isterim. karakter sayısı tam limitte iken ve text in ortasına bir karakter eklediğimiz zaman da sondan karakter siliyor .buyrun size iş
tekrar teşekkür ederim
İşime yarayacak güzel bir çalışma..Emeğinize sağlık.
Projeme ekledim ve kullanıyorum Çok teşekkürler.
Öncelikle çalışman için tebrik ediyorum ama küçük bir js uygulaması için koca bir kütüphanenin sitede açılması bana mantıklı gelmiyor.Yani js ile çabucak yapılacak bir işi jquery ile yapmak istemek? bir yandan 2 kb lik bir kod diğer yandan 100 küsür kb lik bir kod..1 milisaniyede olsa siteyi yavaşlatacaktır.Yanlış anlaşılmaması dileğiyle sadece bir yorum teşekkürler
@recep yüksel
Bunun tersini de düşünmelisin. Diyelim ki daha önceden jQuery kullanmış olduğunuz bir sayfa var. jQuery zaten yüklüyken neden bu eklentiyi kullanmayasın ki? Bu eklentiyi kullanmak yerine yeni baştan javaScript yazman çok daha zararına olacaktır.
Öte yandan, yalnızca bu eklentiyi kullanmak amacıyla jQuery’nin sayfaya dahil edilmesi bana da mantıklı gelmiyor. O zaman düz javaScript uygulamaları kullanmak daha yerinde olacaktır.
Sitemdeki mesaj bölümünde, yorumlarda her yerde kullandım eline sağlık erhan bey.. sizi tebrik ediyorum