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 🙂
4 comments
Hocam yaptım fakat js okumuyor Örnek (” https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js “) yolu vermeme rağmen
Merhaba,
Bir hata alıyor musun ? Tarayıcında geliştirici ekranını açıp (Ctrl+Shift+C) “Console” bölümünü kontrol edip aldığın hatayı benimle paylaşırsan yardımcı olmaya çalışayım.
Aynı zamanda güncel olarak çalışan codepen üzerindeki yazıyı da incelemeni tavsiye ederim;
https://codepen.io/furkangiray_com/pen/XWNdjPQ
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
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.