jQuery Kalan Karakter Uygulaması
Merhaba Arkadaşlar,
Bu makalede sizlere genellikle iletişim sayfalarından tanıdık gelen kalan karakter sayısından bahsedeceğim. İletişim veya rezervasyon tarzı formlarda sıkça rastladığımız bu uygulama bizim yazı girişi yapabildiğimiz TextBox ‘ lar da bir sınırlama yaparak verilen sayının üzerinde karakter girmemizi engellemektedir. Firmaların veya kişilerin kendi web sitelerinde bu tarz bir uygulamayı kullanmasının sebebi genellikle veritabanına kayıt edilebilecek verilerde bir yoğunluk yaşanmamasıdır. Aksi halde oluşabilecek bir yoğunluk veritabanını fazlasıyla meşgul edeceğinden ulaşım sorunları gibi sorunlar ortaya çıkacaktır. Bizde bir JavaScript framework ‘ ü olan jQuery ile bu uygulamanın nasıl gerçekleşebileceğini ve testlerini yaparak bu konuyu daha iyi kavrayacağız.
İlk olarak bir klasör oluşturalım ve içerisine ” index.html ” adında bir sayfa yaratalım. İlk olarak jQuery kütüphanemizi bilgisayarımıza indirerek bu klasör içerisine alacağız. Son sürüm için ” jquery.com ” adresine giriyoruz ve giriş sayfasında sağ bölümde bulunan ” Download ” butonuna tıklıyoruz. Bu tıklama sonucu dosya bilgisayarımıza inmeyecektir. jQuery bizi son sürüm dosyasının bulunduğu linke yönlendirecektir. Açılan bu sayfa içerisindeyken ” Seçenekler / Sayfayı Farklı Kaydet ” seçeneği ile dosyayı oluşturduğumuz klasör içerisine kaydediyoruz.
Şimdi sayfamızı oluşturmaya başlamak için önümüzde bir engel kalmamıştır. index sayfamızı kodlarını yazmak için açıyoruz ve jQuery kütüphanesini sayfamıza çektikten sonra makalenin yazılma nedeni olan kalan karakter uygulamasını hayata geçirebilmek için bir adet input alanı oluşturuyoruz.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Kalan Karakter</title>
<script src="jquery-1.8.2.min.js" ></script>
</head>
<body>
<input type="text" id="kalantext" />
<div id="sonuc">
</div>
</body>
</html>
Sayfamızın geneline baktığımızda bir adet veri giriş alanı ve hemen altında da id ‘ si ” sonuc ” olan bir div yarattık. Sayfanın görünümüne baktığımızda tabiki sonuc div ‘ i görünmeyecektir. jQuery kodlarımız içerisine yazacağımız veriler sonucu Örneğin ” Kalan Karakter : 22 ” yazısını bu div içerisine yazdıracağız.
Şimdi jQuery kodlarımızı yazmadan önce işin mantığına bir bakalım. Bu tarz bir uygulamayı gerçekleştirebilmek için önce elimizde en üst rakamı işaret eden bir sayı olması gerekmektedir. Bunun için ” EnUst ” isimli bir değişken yaratacağız. ilk olarak ” sonuc ” div ‘ i içerisine bu en üst rakamı yazdıracağız ve daha sonra veri girişi yapılarak kod bloğumuzun tetiklenmesini bekleyeceğiz. Herhangi bir veri girişi yapıldığında ise her seferinde input alanındaki veri sayısını alacağız , en üst değerden çıkaracağız , çıkan rakamı ” sonuc ” div ‘ i içerisine yazdıracağız.
jQuery kodlarımızın da açıklamalarıyla birlikte yazıldığı son görünüm şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Kalan Karakter</title>
<script src="jquery-1.8.2.min.js" ></script>
<script>
$(document).ready(function(){
$("#kalantext").keyup(function(){
//Veri Giriş Alanının En Üst Değerini Bir Değişken Vasıtasıyla Belirliyoruz
var EnUst=30;
//Kalan Karakter Yazısının Bulunduğu Bölümde İlk olarak En Üst Değer Kabul Görülüyor
$("#sonuc").text('Kalan Karakter : '+EnUst);
$("#kalantext").focus();
//Eğer Veri Giriş Alanında Bir İşlem Yapıldı İse Bunları Uygula
if(event)
{
//Veri Giriş Alanındaki Karakter Sayısı Her Karakter Ekleme & Silme Anında Sayılarak Bir Değişkene Atanıyor
var KacRakamVar=$("#kalantext").val().length;
//En Üst Değerden Şu Andaki Değer Çıkartılarak Kaç Karaktere Daha İzin Verileceği Hesaplanarak Bir Değişkene Atanıyor
var KalanNeKadar=EnUst-KacRakamVar;
//Eğer Kalan Karakter Sayısı Sıfıra Eşitlendiyse Aşşağıdaki İşlemleri Yap
if(KalanNeKadar<0)
{
$("#kalantext").val($("#kalantext").val().substr(0,EnUst));
}
else
{
$("#sonuc").text('Kalan Karakter : '+KalanNeKadar);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="kalantext" />
<div id="sonuc">
</div>
</body>
</html>
Kodlarımızı üstteki bölümde belirtildiği gibi güncelleyip ardından da sayfamızı çalıştırdığımızda ilk başta sayfamızda yalnızca bir input alanının bulunduğunu göreceğiz. Herhangi bir veri girişi yapıldığında ise hemen bir satır altta ” Kalan Karakter : 29 ” , ” Kalan Karakter : 28 ” , ” Kalan Karakter : 27 ” şeklinde düşüşe geçtiğini göreceğiz. Sayı sıfıra ulaştığında ise input alanına veri girişine izin verilmeyecektir.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 26 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar