masukan telp internasional

Masukan Telepon Internasional

BERITA: kami sekarang memiliki komponen Vue kami sendiri!

BERITA: kami sekarang memiliki komponen React kami sendiri! Mainkan dengannya di Buku Cerita.

?️ BERITA: kini kami menyediakan terjemahan dalam lebih dari 30 bahasa! Lihat mereka beraksi.

Input Telepon Internasional adalah plugin JavaScript untuk memasukkan dan memvalidasi nomor telepon internasional. Dibutuhkan kolom input reguler, menambahkan dropdown negara yang dapat dicari, mendeteksi negara pengguna secara otomatis, menampilkan nomor placeholder yang relevan, memformat nomor saat Anda mengetik, dan menyediakan metode validasi yang komprehensif. Komponen React dan Vue juga disertakan.

Jika Anda merasa plugin ini bermanfaat, mohon pertimbangkan untuk mendukung proyek tersebut.

Disponsori oleh

Gunakan API Twilio untuk membuat verifikasi telepon, SMS 2FA, pengingat janji temu, pemberitahuan pemasaran, dan banyak lagi. Kami tidak sabar untuk melihat apa yang Anda bangun.

Daftar isi

• Komponen React dan Vue
• Demo dan Contoh
• Seluler
• Fitur
• Kompatibilitas Peramban
• Memulai
• Penggunaan yang Disarankan
• Opsi Inisialisasi
• Metode Instans
• Metode Statis
• Acara
• Tema / Mode Gelap
• Terjemahan
• Skrip Utilitas
• Memuat Skrip Utilitas
• Pemecahan masalah
• Berkontribusi
• Atribusi

Komponen React dan Vue

Kami sekarang menyediakan komponen React dan Vue bersama dengan plugin JavaScript reguler. Readme ini untuk plugin JavaScript. Lihat readme React Component atau readme Vue Component.

Demo dan Contoh

Anda dapat melihat demo langsung dan melihat beberapa contoh cara menggunakan berbagai opsi. Alternatifnya, cobalah sendiri dengan mengunduh proyek dan membuka demo.html di browser.

Seluler

Secara default, pada perangkat seluler kami menampilkan popup layar penuh, bukan dropdown sebaris, untuk memanfaatkan ruang layar yang terbatas dengan lebih baik. Ini mirip dengan cara kerja elemen asli. Anda dapat mengontrol perilaku ini dengan opsi useFullscreenPopup . Popup dapat ditutup dengan memilih negara dari daftar atau dengan mengetuk area abu-abu di sampingnya. Lihat contoh (menggunakan komponen React).

Fitur

• Pilih negara pengguna saat ini secara otomatis menggunakan pencarian IP
• Secara otomatis mengatur placeholder masukan ke nomor contoh untuk negara yang dipilih
• Navigasikan dropdown negara dengan mengetikkan nama negara, atau menggunakan tombol atas/bawah
• Secara otomatis memformat nomor saat pengguna mengetik
• Secara opsional, hanya izinkan karakter numerik dan batasi angka pada panjang maksimum yang valid
• Pengguna mengetikkan nomor nasionalnya dan plugin memberi Anda nomor internasional standar lengkap
• Validasi nomor, termasuk jenis kesalahan tertentu
• Gambar bendera beresolusi tinggi
• Aksesibilitas disediakan melalui tag ARIA
• Definisi tipe skrip disertakan
• Sesuaikan gaya dengan mudah dengan mengganti variabel CSS
• Komponen React dan Vue juga disertakan
• Terjemahan untuk nama negara (dll) disediakan dalam berbagai bahasa
• Banyak opsi inisialisasi untuk penyesuaian, serta metode/peristiwa instan untuk interaksi

Kompatibilitas Peramban

krom	Firefox	Safari	Tepian
✓	✓	v14+	✓

Catatan: Kami sekarang telah menghentikan dukungan untuk semua versi Internet Explorer karena tidak lagi didukung oleh versi Windows mana pun.

Memulai (Menggunakan CDN)

1. Tambahkan CSSnya

">

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " >

2. Tambahkan skrip plugin dan inisialisasi pada elemen input Anda

">

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " >  script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
  } ) ;
 script > 

Memulai (Menggunakan bundler misalnya Webpack)

1. Instal dengan npm: npm install intl-tel-input --save atau benang: yarn add intl-tel-input

2. Impor CSS: import 'intl-tel-input/build/css/intlTelInput.css';

3. Tetapkan jalur ke flags.webp dan globe.webp di CSS Anda, dengan mengganti variabel CSS

. iti {
  --iti-path-flags-1x : url ( 'path/to/flags.webp' );
  --iti-path-flags-2x : url ( 'path/to/[email protected]' );
  --iti-path-globe-1x : url ( 'path/to/globe.webp' );
  --iti-path-globe-2x : url ( 'path/to/[email protected]' );
}

4. Impor JS dan inisialisasi plugin pada elemen input Anda

import("intl-tel-input/utils") });">

 import intlTelInput from 'intl-tel-input' ;

const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
    loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ;

Kebanyakan bundler (seperti Webpack, Vite, atau Parcel) akan melihat ini dan menempatkan skrip utilitas dalam bundel terpisah dan memuatnya secara asinkron, hanya jika diperlukan. Jika ini tidak berhasil dengan bundler Anda atau Anda ingin memuat modul utils dari lokasi lain (seperti CDN), Anda dapat mengatur opsi loadUtilsOnInit ke URL yang akan dimuat sebagai string. Misalnya:

 import intlTelInput from 'intl-tel-input' ;

const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
    loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; 

Memulai (Tidak menggunakan bundler)

1. Unduh rilis terbaru, atau lebih baik lagi instal dengan npm

2. Tambahkan lembar gaya

">

 < link rel =" stylesheet " href =" path/to/intlTelInput.css " >

3. Tetapkan jalur ke flags.webp dan globe.webp di CSS Anda, dengan mengganti variabel CSS

. iti {
  --iti-path-flags-1x : url ( 'path/to/flags.webp' );
  --iti-path-flags-2x : url ( 'path/to/[email protected]' );
  --iti-path-globe-1x : url ( 'path/to/globe.webp' );
  --iti-path-globe-2x : url ( 'path/to/[email protected]' );
}

4. Tambahkan skrip plugin dan inisialisasi pada elemen input Anda

">

 < script src =" path/to/intlTelInput.js " >  script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "path/to/utils.js"
  } ) ;
 script > 

Penggunaan yang Disarankan

Kami sangat menyarankan Anda memuat utils.js yang disertakan, yang memungkinkan pemformatan dan validasi, dll. Kemudian plugin dibuat untuk selalu menangani angka dalam format internasional lengkap (misalnya "[phone]") dan mengonversinya sesuai - bahkan ketika nationalMode atau separateDialCode diaktifkan. Kami menyarankan Anda mendapatkan, menyimpan, dan menyetel nomor secara eksklusif dalam format ini untuk kesederhanaan - sehingga Anda tidak perlu berurusan dengan penanganan kode negara secara terpisah, karena nomor internasional lengkap menyertakan informasi kode negara.

Anda selalu bisa mendapatkan nomor internasional lengkap (termasuk kode negara) menggunakan getNumber , lalu Anda hanya perlu menyimpan satu string tersebut di database Anda (Anda tidak perlu menyimpan negara secara terpisah), dan kemudian saat berikutnya Anda menginisialisasi plugin dengan memasukkan nomor tersebut, maka secara otomatis akan mengatur negara dan memformatnya sesuai dengan pilihan yang Anda tentukan (misalnya ketika menggunakan nationalMode maka secara otomatis akan menampilkan nomor dalam format nasional, menghilangkan kode panggil internasional).

Jika Anda mengetahui negara pengguna, Anda dapat menyetelnya dengan initialCountry (misalnya "us" untuk Amerika Serikat), dan jika tidak, kami sarankan menyetel initialCountry ke "auto" (bersama dengan opsi geoIpLookup ) untuk menentukan negara pengguna negara berdasarkan alamat IP mereka - lihat contoh.

Jika Anda mengetahui bahasa pengguna, Anda dapat menggunakan terjemahan yang disertakan untuk melokalisasi nama negara (dll) - lihat contoh.

Opsi Inisialisasi

Saat Anda menginisialisasi plugin, argumen pertama adalah elemen input, dan argumen kedua adalah objek yang berisi opsi inisialisasi yang Anda inginkan, yang dirinci di bawah. Catatan: opsi apa pun yang menggunakan kode negara harus berupa kode ISO 3166-1 alpha-2.

izinkan Dropdown
Tipe: Boolean Default: true
Apakah mengizinkan dropdown atau tidak. Jika dinonaktifkan, tidak ada panah tarik-turun, dan negara yang dipilih tidak dapat diklik. Selain itu, jika showFlags diaktifkan, kami akan menampilkan bendera yang dipilih di sebelah kanan karena itu hanyalah penanda negara. Perhatikan bahwa jika separateDialCode diaktifkan, allowDropdown akan dipaksa menjadi true karena dropdown diperlukan saat pengguna mengetik "+" dalam kasus ini. Mainkan opsi ini di Storybook (menggunakan komponen React).

placeholder otomatis
Tipe: String Default: "polite"
Atur placeholder masukan ke nomor contoh untuk negara yang dipilih, dan perbarui jika negara berubah. Anda dapat menentukan tipe nomor menggunakan opsi placeholderNumberType . Secara default, ini disetel ke "polite" , yang berarti ia hanya akan menyetel placeholder jika inputnya belum memilikinya. Anda juga dapat menyetelnya ke "aggressive" , yang akan menggantikan placeholder yang ada, atau "off" . Membutuhkan skrip utils untuk dimuat.

kelas kontainer
Jenis: String Default: ""
Kelas tambahan untuk ditambahkan ke pembungkus (disuntikkan)

.

pesanan negara
Tipe: Array Default: null
Tentukan urutan daftar negara dengan serangkaian kode negara iso2. Negara apa pun yang dihilangkan akan muncul setelah negara yang ditentukan, misalnya menyetel countryOrder ke ["jp", "kr"] akan menghasilkan daftar: Jepang, Korea Selatan, Afganistan, Albania, Aljazair, dll...

pencarian negara
Tipe: Boolean Default: true
Tambahkan input pencarian ke bagian atas dropdown, sehingga pengguna dapat memfilter negara yang ditampilkan.

Placeholder khusus
Jenis: Function Default: null
Ubah placeholder yang dihasilkan oleh autoPlaceholder. Harus mengembalikan string.

 intlTelInput ( input , {
  customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
    return "e.g. " + selectedCountryPlaceholder ;
  } ,
} ) ;

dropdownContainer
Jenis: Node Default: null
Mengharapkan sebuah simpul misalnya document.body . Daripada menempatkan markup tarik-turun negara di sebelah masukan, tambahkan markup tersebut ke node yang ditentukan, dan kemudian akan diposisikan di sebelah masukan menggunakan JavaScript (menggunakan position: fixed ). Ini berguna ketika input berada di dalam wadah dengan overflow: hidden . Perhatikan bahwa pemosisiannya dipecah dengan menggulir, sehingga dropdown akan ditutup secara otomatis pada acara gulir window .

kecualikan Negara
Jenis: Array Default: []
Di tarik-turun, tampilkan semua negara kecuali negara yang Anda tentukan di sini. Mainkan opsi ini di Storybook (menggunakan komponen React).

perbaikiDropdownWidth
Tipe: Boolean Default: true
Perbaiki lebar dropdown ke lebar masukan (bukan selebar nama negara terpanjang). Mainkan opsi ini di Storybook (menggunakan komponen React).

formatAsYouType
Tipe: Boolean Default: true
Secara otomatis memformat nomor saat pengguna mengetik. Fitur ini akan dinonaktifkan jika pengguna mengetikkan karakter pemformatannya sendiri. Membutuhkan skrip utils untuk dimuat.

formatPada Tampilan
Tipe: Boolean Default: true
Format nilai input (sesuai dengan opsi nationalMode ) selama inisialisasi, dan pada setNumber . Membutuhkan skrip utils untuk dimuat.

pencarian geoIp
Jenis: Function Default: null
Saat mengatur initialCountry ke "auto" , Anda harus menggunakan opsi ini untuk menentukan fungsi khusus yang memanggil layanan pencarian IP untuk mendapatkan lokasi pengguna dan kemudian memanggil panggilan balik success dengan kode negara yang relevan. Perhatikan juga bahwa saat membuat instance plugin, objek Promise dikembalikan di bawah properti instance promise , sehingga Anda dapat melakukan sesuatu seperti iti.promise.then(...) untuk mengetahui kapan permintaan inisialisasi seperti ini telah selesai.

Berikut ini contoh penggunaan layanan ipapi:

 intlTelInput ( input , {
  initialCountry : "auto" ,
  geoIpLookup : function ( success , failure ) {
    fetch ( "https://ipapi.co/json" )
      . then ( function ( res ) { return res . json ( ) ; } )
      . then ( function ( data ) { success ( data . country_code ) ; } )
      . catch ( function ( ) { failure ( ) ; } ) ;
  }
} ) ;

Perhatikan bahwa callback failure harus dipanggil jika terjadi kesalahan, oleh karena itu gunakan catch() dalam contoh ini. Tip: simpan hasilnya dalam cookie untuk menghindari pencarian berulang!

masukan tersembunyi
Jenis: Function Default: null
Memungkinkan pembuatan kolom masukan tersembunyi dalam formulir untuk menyimpan nomor telepon internasional lengkap dan kode negara yang dipilih. Ia menerima fungsi yang menerima nama input telepon utama sebagai argumen. Fungsi ini harus mengembalikan objek dengan properti phone dan (opsional) country untuk menentukan nama input tersembunyi untuk nomor telepon dan kode negara. Hal ini berguna untuk pengiriman formulir non-Ajax untuk memastikan nomor internasional dan kode negara lengkap terekam, terutama ketika nationalMode diaktifkan.

* Catatan : Fitur ini mengharuskan input berada di dalam elemen

, karena fitur ini mendengarkan event submit pada elemen form terdekat. Perhatikan juga bahwa karena ini menggunakan getNumber secara internal, pertama-tama skrip utils harus dimuat, dan kedua ia mengharapkan nomor yang valid sehingga hanya akan berfungsi dengan benar jika Anda telah menggunakan isValidNumber untuk memvalidasi nomor sebelum mengizinkan pengiriman formulir untuk dilalui.

 intlTelInput ( input , {
  hiddenInput : function ( telInputName ) {
    return {
      phone : "phone_full" ,
      country : "country_code"
    } ;
  }
} ) ;

Ini akan menghasilkan elemen (tersembunyi) berikut, yang akan terisi secara otomatis saat dikirimkan:

">

 < input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " >