JavaScript ile Harf, Rakam Kontrolü

Önceki yazılarımızda JavaScript ile ilgili olaylara değinmiştir. Twitter benzeri 140 karakter kontrolü yaparak kullanıcının girdiği karakter sayısını anında göstermiştik. Aşağıdaki linkten ulaşabilirsiniz.

JavaScript ile Twitter Benzeri Karakter Kontrolü

Bu yazımızda metin kutusuna(text) girilen bilginin küçük harf, büyük harf veya sayı olma durumuna göre bilgi vereceğiz. Bu örneği daha da geliştirerek profesyonel projelerinizde kullanabilirsiniz.
 
Önce bir metin editöründe (Sublime, Notepad++ vb.) yeni bir sayfa açınız form tag'leri arasına aşağıdaki gibi bir metin kutusu ekleyiniz. Burada onkeyup() olayı, klavyeden her tuşa bastığınızda tetiklenen bir olaydır. Bu olay tetiklendiğinde kendi yazdığımız formKontrol() fonksiyonunu çağırıyoruz.

<input type="text" id="txtSayi" onkeyup="formKontrol()">

Daha sonra formKontrol() fonksiyonunda girilen metni aşağıdaki şekilde alıyoruz.

var veri = document.getElementById("txtSayi").value;

veri değişkenimize txtSayi nesnesi içine girilen bilgi aktarıldı, sonra girilen metnin uzunluğunu buluyoruz.

uzunluk=veri.length;
sonkarakter=veri[uzunluk-1];

Son karaktere ulaşmak için girilen metnin son karakterine gidiyoruz, bunu veri[uzunluk-1] ile yapıyoruz. Daha sonra if(eğer) satırlarımız başlıyor ve karakterin hangi aralıkta girildiğini tespit ediyoruz. Örneğin 0 ile 9 arasında giriş yapılıp yapılmadığını aşağıdaki kod satırı ile anlıyoruz.

if(sonkarakter>='0' && sonkarakter<='9') 
alert('Sayı girdiniz');

Tüm kodu aşağıda bulabilirsiniz.



<html>
<head>
 <meta charset="utf-8">
 <script>
function formKontrol()
{
   var mesaj="";
var veri = document.getElementById("txtSayi").value;
 
uzunluk=veri.length;
sonkarakter=veri[uzunluk-1];
 
    if(sonkarakter>='0' && sonkarakter<='9')
       document.getElementById("bilgimesaj").innerHTML = "Sayı girdiniz";
 
    else if(sonkarakter>='a' && sonkarakter<='z')
       document.getElementById("bilgimesaj").innerHTML = "Küçük harf girdiniz";
 
   else if(sonkarakter>='A' && sonkarakter<='Z')
       document.getElementById("bilgimesaj").innerHTML = "Büyük harf girdiniz";
   
}
</script>
 
</head>
<body>
<form>
<label>Bilgi giriniz:</label><br/>
    <input type="text" id="txtSayi" onkeyup="formKontrol()">
<div><span id="bilgimesaj"></span></div>
</form>
 
</body>
</html>

Daha gelişmiş örneklerle devam edeceğiz, eksikleriniz varsa aşağıdaki sunumu inceleyebilirsiniz.

JavaScript Giriş (69 Slayt)
Jquery Giriş (Az kod, çok iş)

Mutlu kodlamalar,
Mayıs 2017
Oğuzhan TAŞ
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale