Ü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 🙂

0 Shares:
4 comments
  1. Hocam selamlar, öncelikle emeğinize sağlık.
    Herşey güzel çalışıyor fakat bayrağı seçince input içine kodu bir türlü yazdıramadım. Neden olabilir sizce

    1. Merhabalar,
      Güzel yorumunuz için çok teşekkür ederim yorumunuzu yeni gördüm kusura bakmayın muhtemelen sorun çözüme kavuşmuştur fakat ben aynı sorunu yaşayanlar olabilir diye açıklayım;

      Input içine ülke kodunu yazdırmak için `nationalMode: false ` değerini javascript bölümüne entegre etmemiz gerekiyor. Yazdığınız halde çalışmıyorsa utils.js dosyasını entegre ederken hata veriyor olabilir onun için Console ekranını kontrol edip ona göre düzenleme yapılabilir.

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
HTML Yeni Sekmede Link Açma
Devamını Oku

Yeni Sekmede Link Açma

HTML ile sitenizde bir link (bağlantı) verdiğinizde sizin sitenizden ayrılmadan o bağlantıyı yeni bir sekmede açma işlemini yapabilirsiniz. Nasıl yapıldığına dair detaylar yazının devamında açıklanmıştır.

Devamını Oku