JS ile Telefon Maskelemesi yapmak

Belirli bir metin girişi alanına (örneğin, bir telefon numarası giriş alanına) girilen metni otomatik olarak bir telefon numarası formatına dönüştürmek için sıkça kullandığım bir yöntem.

 <input type="text" id="phoneNumber" placeholder="(555) 555-5555" name="phone" class="form-control" >

Sonrasında bir js kodlarını yazacağımız bir script taglarına ihtiyacımız var.

<script>
    document.getElementById('phoneNumber').addEventListener('input', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    });
</script>

Bu JavaScript kodu, belirli bir metin girişi alanına (örneğin, bir telefon numarası giriş alanına) girilen metni otomatik olarak bir telefon numarası formatına dönüştürmek için kullanılır. Kodun çalışma mantığı şu adımları izler:

1. document.getElementById('phoneNumber'): Telefon numarası giriş alanını tanımlar. Bu, HTML sayfanızda bir id özniteliğiyle phoneNumber olarak adlandırılan bir giriş alanı olmalıdır.
2. addEventListener('input', function (e) { ... }): Telefon numarası giriş alanında herhangi bir giriş yapıldığında çalışacak bir olay dinleyicisi ekler. Bu, kullanıcının herhangi bir tuşa basması veya değeri yapıştırması durumunda tetiklenir.
3. var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);: Kullanıcının girdiği metni alır ve replace yöntemiyle tüm olmayan rakam karakterlerini (\D) boş bir dizeyle ('') değiştirir. Daha sonra, match yöntemiyle bir dizi oluşturur. Bu dizi, girilen rakamları üç gruba ayırır: ilk üç rakam, ikinci üç rakam ve dördüncü dört rakam.
4. e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');: Telefon numarasını formatlamak için, oluşturulan diziye dayanarak giriş alanına yeni bir değer atanır. Eğer ikinci grup yoksa (!x[2]), sadece birinci gruba (x[1]) odaklanır. Ancak ikinci grup varsa, telefon numarasını standart bir formatla ((123) 456-7890) biçimlendirir. Üçüncü grup varsa, bu da eklenir ve telefon numarasının sonuna tire (-) eklenir.

Bu kod, kullanıcının telefon numarasını girdikçe otomatik olarak belirli bir formata dönüştürerek daha okunabilir bir görünüm sağlar.