Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

jQuery ile Maksimum Karakter Sınırı – Maxlength with jQuery

Bir proje içinde kullanıcıların yazacakları alanları sınırlamak gerekiyor. Bunun bir kaç yöntemi var fakat biraz daha süslü ve basit yolunu birazdan anlatacağım. Metin alanlarına veri girişini kısıtlamak için bazı yollar uygulanır. Bunları çoğu sitede görürsünüz. Mesaj yazarken bastığını her tuştan sonra sağda, solda bir yerde rakamlar azalmaya başlar. Karakter sayınızın kalan rakamını verir size. İşte bu olayı şimdi jQuery ile yapacağız.

Adım 1 – Html Kodlarını Eklemek

  <div id="Main"> <div id="Alan1"> <textarea rows="5" cols="50"></textarea> <div></div> </div> <div id="Alan2"> <textarea rows="5" cols="50"></textarea> <div></div> </div> </div>  

Burada 2 adet farklı sınıflara sahip textarea elemanı oluşturduk. Ve kendi değerlerini atadık. Kolon ve satır olarak.

Adım 2 – Css Kodlarını Eklemek

  #Main { width:800px; height:100%; color:#000000; font:Arial, Helvetica, sans-serif 12px;} .Alan1, .Alan2{ border:1px solid #999999; padding:5px;} .KalanKarakter { font-size:12px; font-weight:bold; color:#FF0000; margin-top:10px;} .Uyari {border:3px solid #0066CC; background-color: #FF9900; padding:5px;} span.KalanRakam { color:#000000; font-size:14px;} #Alan2 { margin-top:20px;}  

Sınıf atadığımız textarea elemanlarının stil değerlerini girdik ve başka elemanlara da stil atadık. Textarea haricindeki öğeler birazdan ekleyeceğimiz jquery dosyalarının içinde tanımlanmış değişkenlerdir.

Adım 3 – JS Dosyalarını ve jQuery Kod Bloğunu Eklemek

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.maxlength.js"></script>  

İlk dosyamız jQuery çekirdek dosyamız ikincisi ise kullanacağımız eklentinin js dosyasıdır. Şimdi oluşturduğumuz textarea öğelerine istediğimiz şekilde çalışmalarını sağlatacağımız jQuery kod bloğunu ekleyelim;

  $(document).ready(function(){ $('.Alan1').maxlength({status: true}); $('.Alan2').maxlength({status: true, showAlert: true, slider: true}); });  

Alan1 isimli sınıf için maxlength değerini atadık ve yukarıdaki 2. js dosyasında belirtilen değişkenlerden birisi olan “status” isimli elemanın aktifliğini “true” ile belirttik. Bu işlem bize metin alanı içine yazarken ne kadar rakam kaldığını gösterecektir. false değer döndürürsek eğer göstermeyecektir. Alan2 isimli sınıf için ise status değişkeninin haricinde 2 ayrı değişken daha belirttik; showAlert ve slider. showAlert bildiğimiz javascript uyarı ekranı. Belirttiğimiz karakter dışına çıkınca ekranın ortasında uyarı ekranı çıkıyor ve jquery.maxlength.js dosyasının içinde belirttiğimiz uyarı metnini ekrana basıyor. Slider değişkeni ise metin alanına tıklanınca çıkacak olan kalan karakter divi ile ilgili. Örneğe bakarsanız çok daha iyi anlayabilirsiniz.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

Not : Uygulamanın orjinal adresine ->http://www.anon-design.se/demo/maxlength-jquery ulaşabilirsiniz. Ben orjianel dosyalarda bazı değişiklikler yaptım.