Bu derste işleyeceğimiz konu; inputa yazılan değeri anlık olarak düzenlemek olacak. Örnek olarak girilen değeler arasına tire ekleyceğiz. Yapacağımız bu örnekle bir çok fikir üretebilir ve uygulayabilirsiniz.
Çalışmaya başlamak için ilk olarak bir input oluşturalım. Bu inputa girilen değerleri yakalayarak gerekli düzenlemeleri gerçekleştirelim.
<input type="text" id="duzenle" onkeyup="duzenle(this)" placeholder="Bir şeyler yazın" />
Yukarıdaki INPUT değerinde, onkeyup ile her tuşa basıldığında duzenle() fonksiyonunu çalıştırıyoruz. Bu fonksiyonda da düzenleme işlemini gerçekleştirip tekrar INPUT’a yazılmasını sağlayacağız.
<script>
function duzenle (element){
// inputu seçiyoruz
var input = document.getElementById(element.id);
// gereksiz tireyi siliyoruz.
input = input.value.split('-').join('');
// match ile 4 karakterde bir "-" ekle diyoruz.
var finalVal = input.match(/.{1,4}/g).join('-');
// değeri tekrar inputa yazdırıyoruz.
document.getElementById(element.id).value = finalVal;
}
</script>
Yukarıda yer alan kodları adım adım inceleyecek olursak;
- Düzenleme işlemi için script alanlarında duzenle() fonksiyonu oluşturuyoruz. Bu fonksiyona paramtere olarak kullanılan etiketi seçmek için yazdığımız this tanımlamasını seçiyoruz.
- Fonksiyonu oluşturduktan sonra var input ile input değerini tanımlıyoruz. Böylelikle hangi input üzerinden işlem yaptığımızı ve sonrasında dönüş yapılması için input isimli değişkende bu bilgiyi tutuyoruz.
- Düzenleme işlemi sırasında sürekli olarak join() çalışacak ve bir bozulmaya neden olacaktır. Bunu düzenlemek içinde input değerindeki gereksiz tire (-) değerlerini boşluğa eşitleyip düzenleme yapıyoruz.
- FinalVal değişkeni ile 4 karakterde bir tire(-) eklenmesini sağlıyoruz.
- Tüm bu işlemler sonrasında gerçekleştirilen filtreleme sonucu seçilen input değerine yeni değerini yazdırıyoruz.
Bu adımlarla birlikle INPUT alanında anlık düzenleme yapmış oluyoruz. Bu derste öğrenmiş olduğunuz bilgilerle match ve join metodlarını kullanarak farklı uygulamalar gerçekleştirebilirsiniz.
