Jquery membuat Input Telepon Internasional Menggunakan Bendera Dan Kode Telepon Negara, ketika membuat sebuah form register/daftar sering kali melihat input text untuk nomor telepon yang memiliki fungsi sebagai verifikasi pendaftaran atau untuk keamanan sebuah akun.
website besar seperti gmail, yahoo telah mewajibkan jika mendaftar mewajibkan memasukkan nomor telp ketika mendaftar email baru.
agar lebih menarik dan mudah dalam penginputan nomor telepon sering terlihat bendera dari negara kita berasal ataupun negara lain yang memiliki kode telepon negara.
selanjutnya kita akan membuat tampilan seperti pada gambar diatas. cara menggunakannya
1. Download Dulu Plugin Jquery Intel-Tel-Input disini
2. Lalu masukkan intlTelInput.css ke diantara tag <head> di halaman html
<link rel="stylesheet" href="build/css/intlTelInput.css"> <link rel="stylesheet" href="build/css/demo.css">
kode diatas berarti intlTelInput.css berada dalam folder build >> css
3. lalu buat element input text biasa
<input type="tel" id="demo" placeholder="">
4. Lalu masukkan jquert javascript class dan jquery international telephone di bawah sebelum tag penutup body </body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="build/js/intlTelInput.js"></script>
5. Lalu tambahkan kode ini dibawah kode jquery international telephone untuk mengaktifkan plugin
<script>
$("#mobile-number").intlTelInput();
</script>6. jika benar keseluruhan dari kode akan seperti berikut ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>International Telephone Input</title>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
</head>
<body>
<h1>International Kode Telephone</h1>
<form>
<input id="mobile-number" type="tel">
<button type="submit">Submit</button>
</form>
<!-- Load jQuery from CDN so can run demo immediately -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="build/js/intlTelInput.js"></script>
<script>
$("#mobile-number").intlTelInput();
</script>
</body>
</html>
kode telepon akan otomatis berubah jika mengubah bendera dan perlu diketahui plugin jquery intl-Tel-Input yang dibuat olehjackocnr
Untuk Versi yang telah dimodifikasi bisa kamu download disini
Demikianlah artikel Jquery membuat Input Telepon Internasional Menggunakan Bendera Dan Kode Telepon Negara. semoga dapat kamu aplikasikan dan berguna untuk form pendaftaran/register yang dibuat.