ibrahim Çevrük

Javascript İle Belirli Değerler Arasına Tire Ekleme

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;

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.

Exit mobile version