Skip to content

A fork of jQuery intl-tel-input plugin with Search country function

License

Notifications You must be signed in to change notification settings

tingan/intl-tel-input

 
 

Repository files navigation

International Telephone Input plugin fork with search functionBuild Status

A jQuery plugin for entering and validating international telephone numbers with searching phone country code by country name function.

The work is a by-product from MeetingPackage.com company project [MeetingPackage.com](https://meetingpackage.com).

Getting Started

  1. Download the latest release, or better yet install it with npm

  2. Include the stylesheet

<link rel="stylesheet" href="path/to/intlTelInput.css">
  1. Override the path to flags.png in your CSS
.iti-flag {background-image: url("path/to/flags.png");}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .iti-flag {background-image: url("path/to/flags@2x.png");}
}
  1. Add the plugin script and initialise it on your input element
<input type="tel" id="phone">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/intlTelInput.js"></script>
<script>
  $("#phone").intlTelInput();
</script>
  1. Recommended: initialise the plugin with the utilsScript option to enable formatting/validation, and to allow you to extract full international numbers using getNumber.
  2. Customization: the search input box style in intlTelInput.scss
 #input-search-country {
  width: 400px;
}

About

A fork of jQuery intl-tel-input plugin with Search country function

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 77.1%
  • CSS 20.7%
  • HTML 2.2%