Ülke Telefon Kodu Listeleme

Telefon numarası alanına ülkelerin telefon kodlarını listeleyip seçilen ülkenin telefon kodunu otomatik ekleten bir Javascript eklentisinden bahsettim. Yazımın devamını okuyup detaylı inceleyebilirsiniz.

Merhabalar,

Bu yazımda telefon numarası alanına ülkelerin telefon kodlarını listeleyip seçme örneği verdim. Seçilen ülkenin telefon kodunu otomatik olarak başa ekleten bir Javascript eklentisi. Birden fazla ülkeye hizmet veren firma siteleri için kullanışlı olmaktadır. Kendi sitesine bu adresten ulaşıp gerekli bilgilere göz atabilirsiniz.

Tanımlamasını yaptıktan sonra örneklerle uygulamaya geçirelim;

<!--Head Etiketi-->
<link rel="stylesheet" href="/css/intlTelInput.css" />
<!--Head Etiketi-->

<!--Body etiketi bitişinden önce-->
<script src="/js/intlTelInput.min.js"></script>

Eklentiyi kullanabilmek için css ve javascript dosyalarını çağırmamız gerekiyor. Yukarıda dosyaları hangi sıralama ile kullanabileceğinizi yorum satırları ile açıkladım. Sonradan yazacağımız javascript kodlarını da bu dosyanın altında bir script tagı açıp içine yerleştiriyoruz. Dosyaları CDN ile uzaktan da çağırabilirsiniz.

Kullanım örneği için yazacağımız Javascript  input id eşleşmeli html tarafıyla birlikte kodları aşağıya bırakıyorum;

<input id="telefon" name="telefon" type="tel">

<!-- Javascript dosyası altında olmalı -->
<script src="/js/intlTelInput.min.js"></script>
<script>
    var input = document.querySelector("#telefon");
    intlTelInput(input, {
        utilsScript: "/js/utils.js", // Telefon kodlarını getiren dosya
        initialCountry: "tr", // Varsayılan olarak Türkiye'yi getir
        nationalMode: false // otomatik olarak input'a ekle
    });
</script> 

Yukarıda bir input elemanı ekleyip, buna Javascript ile id üzerinden eşleştirip eklediğimiz eklentiye tanıtıyoruz. Bu sayede bu input elemanını seçip içine bayraklar ile birlikte ülkelerin telefon kodlarını listeleyen bir select açıyor. Tıklanınca input içinde ülkeleri ve ülke telefon kodlarını listeliyor.

nationalMode: false değeri ile kullanıcı ülkeyi seçtiğinde otomatik olarak inputa ülke kodunu yazdırır. Eğer bu özelliği istemiyorsanız true olarak ayarlayabilirsiniz

Formlarınızda telefon numarası alanı için kullanabilirsiniz. 

Mutlu Kodlamalar 🙂

1 Shares:
2 comments

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin