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> etiketi 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 aşağıdaki gibidir:

<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 erişip eklentiye tanıtıyoruz. Bu sayede bu input alanında bayraklar ile birlikte ülkelerin telefon kodlarını gösteren bir seçim menüsü oluşuyor.

Kullanıcı ülkeyi seçtiğinde, nationalMode: false değeri sayesinde ülke kodu otomatik olarak input’a ekleniyor. Bu özelliği devre dışı bırakmak isterseniz true olarak ayarlayabilirsiniz.

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

Mutlu Kodlamalar :)