Element input phone menggunakan Dial Code dan Flag

Nomor telepon merupakan salah satu data penting yang dapat digunakan sebagai syarat mendaftar pada instansi tertentu, yang dapat dilakukan secara online. Nomor telepon setiap negara memiliki kode tertentu untuk membedakan nomor telepon ini berasal dari negara mana. Sehingga akan mempermudah untuk melakukan pelacakan maupun mengkontak si pemilik nomor tersebut.

Jika seorang dari suatu negara akan melakukan pendaftaran pada suatu situs namun dia tidak hafal dengan kode negaranya itu kadang terjadi. Untuk mengatasi hal tersebut maka dalam pembuatan element <input> diperlukan sebuah dropdown list kode negara seperti gambar di bawah ini,

Untuk mengaplikasikan bentuk element input seperti di atas Langkah-langkah adalah sebagai berikut:

Langkah 1 Simpan file css dan js di dalam folder content, Download

Langkah 2 Include file script tersebut di bagian Head atau _Layout.cshtml.


<!--ADDED TAG JS BY WOT.AGUNG (AGUNGCODE.COM) 2021-07-22 -->
<link rel="stylesheet" href="@Url.Content("~/Content/Flag/css/intlTelInput.css")" />
<script type="text/javascript" src="@Url.Content("~/Content/Flag/js/intlTelInput-jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/Flag/js/intlTelInput.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/Flag/js/utils.js")"></script>

Langkah 3 Buat element input di form modal


<div class="form-group form-group-xs">
     <label class="col-md-3 control-label text-muted">Phone </label>
     <div class="col-md-8">
          <input class="form-control" type="tel" id="fr_PHONE" name="fr_PHONE" placeholder="(___)-____-____" maxlength="15" />
     </div>
</div>

Langkah 4 Inisialisasi plugin


$("#fr_PHONE").intlTelInput({
	//negara-negara yang tampil di baris pertama
	preferredCountries: ["id", "jp", "th","ph","vn","us"], 
	utilsScript: "~/Content/Bootstrap/js/utils.js"
	//Isi dengan Option
});

Tidak hanya preferredCountries saja yang bisa kamu tambahkan tetapi code di bawah ini,


	// whether or not to allow the dropdown
    allowDropdown: true,
    
    // if there is just a dial code in the input: remove it on blur, and re-add it on focus
    autoHideDialCode: true,
    
    // add a placeholder in the input with an example number for the selected country
    autoPlaceholder: "polite",
    
    // modify the auto placeholder
    customPlaceholder: null,
    
    // append menu to specified element
    dropdownContainer: null,
    
    // don't display these countries
    excludeCountries: [],
    
    // format the input value during initialisation and on setNumber
    formatOnDisplay: true,
    
    // geoIp lookup function
    geoIpLookup: null,
    
    // inject a hidden input with this name, and on submit, populate it with the result of getNumber
    hiddenInput: "",
    
    // initial country
    initialCountry: "",
    
    // localized country names e.g. { 'de': 'Deutschland' }
    localizedCountries: null,
    
    // don't insert international dial codes
    nationalMode: true,
    
    // display only these countries
    onlyCountries: [],
    
    // number type to use for placeholders
    placeholderNumberType: "MOBILE",
    
    // the countries at the top of the list. defaults to united states and united kingdom
    eferredCountries: ["id", "jp", "th","ph","vn","us"],
    
    // display the country dial code next to the selected flag so it's not part of the typed number
    separateDialCode: false,
    
    // specify the path to the libphonenumber script to enable validation/formatting

Langkah 5 Inisialisasi plugin untuk mengatur inputan nomor telepon


$("input[name='fr_PHONE']").on('input', function() {
    var number = $(this).val().replace(/[^d]/g, '')
    if (number.length == 6) {
        number = number.replace(/(d{3})(d{3})/, "$1-$2");
    }
    else if (number.length == 7) {
        number = number.replace(/(d{3})(d{4})/, "$1-$2");
    } else if (number.length == 10) {
        number = number.replace(/(d{3})(d{3})(d{4})/, "($1) $2-$3");
    } else if (number.length == 11) {
        number = number.replace(/(d{3})(d{4})(d{4})/, "($1) $2-$3");
    }
	$(this).val(number)
});

Langkah 6 Cara Get Value intlTelInput


var countryCode = $("#fr_PHONE").intlTelInput("getSelectedCountryData").dialCode;
var countryCodeId = $("#fr_PHONE").intlTelInput("getSelectedCountryData").iso2; //us,id,vn,jp etc.
var PHONE = '+' + countryCode + $("#fr_PHONE").val()

Langkah 7 Event handlers


var input = document.querySelector("#fr_PHONE");
input.addEventListener("countrychange", function() {
    // do something with iti.getSelectedCountryData()
});
input.addEventListener("open:countrydropdown", function() {
   // triggered when the user opens the dropdown
});
    input.addEventListener("close:countrydropdown", function() {
   // triggered when the user closes the dropdown
});

Programming Visual Studio