JS加载世界各国手机区号、图标（可适用手机端）

# International Telephone Input [](https://travis-ci.org/jackocnr/intl-tel-input) A jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods. <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshot.png" width="424px" height="246px"> If you like it, please consider making a donation, which you can do from [the demo page](http://intl-tel-input.com). ## Table of Contents - [Demo and Examples](#demo-and-examples) - [Features](#features) - [Browser Compatibility](#browser-compatibility) - [Getting Started](#getting-started) - [Recommended Usage](#recommended-usage) - [Options](#options) - [Public Methods](#public-methods) - [Static Methods](#static-methods) - [Events](#events) - [Utilities Script](#utilities-script) - [Troubleshooting](#troubleshooting) - [Contributing](#contributing) - [Attributions](#attributions) ## Demo and Examples You can view a live demo and some examples of how to use the various options here: http://intl-tel-input.com, or try it for yourself using the included demo.html. ## Features * Automatically select the user's current country using an IP lookup * Automatically set the input placeholder to an example number for the selected country * Navigate the country dropdown by typing a country's name, or using up/down keys * Handle phone number extensions * The user types their national number and the plugin gives you the full standardized international number * Full validation, including specific error types * Retina flag icons * Lots of initialisation options for customisation, as well as public methods for interaction ## Browser Compatibility | Chrome | FF | Safari | IE | Chrome Android | Mobile Safari | IE Mob | | :----: | :--: | :----: | :--: | :------------: | :-----------: | :----: | | ✓ | ✓ | ✓ | 11 | ✓ | ✓ | ✓ | Note: In v12.0.0 we dropped support for IE9 and IE10, because they are no longer supported by any version of Windows - see https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/ ## Getting Started 1. Download the [latest release](https://github.com/jackocnr/intl-tel-input/releases/latest), or better yet install it with [npm](https://www.npmjs.com/package/intl-tel-input) 2. Include the stylesheet ```html <link rel="stylesheet" href="path/to/intlTelInput.css"> ``` 3. Override the path to flags.png in your CSS ```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");} } ``` 4. Add the plugin script and initialise it on your input element ```html <input type="tel" id="phone"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="path/to/intlTelInput.js"></script> <script> $("#phone").intlTelInput(); </script> ``` 5. **Recommended:** initialise the plugin with the `utilsScript` option to enable formatting/validation, and to allow you to extract full international numbers using `getNumber`. ## Recommended Usage We highly recommend you load the included utils.js using the `utilsScript` option. Then the plugin is built to always deal with numbers in the full international format (e.g. "+17024181234") and convert them accordingly - even when `nationalMode` or `separateDialCode` is enabled. I recommend you get, store, and set numbers exclusively in this format for simplicity - then you don't have to deal with handling the country code separately, as full international numbers include the country code information. You can always get the full international number (including country code) using `getNumber`, then you only have to store that one string in your database (you don't have to store the country separately), and then the next time you initialise the plugin with that number it will automatically set the country and format it according to the options you specify (e.g. if you enable `nationalMode` it will automatically remove the international dial code for you). ## Options Note: any options that take country codes should be [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes **allowDropdown** Type: `Boolean` Default: `true` Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state. **~~autoFormat~~ [REMOVED]** Automatically format the number as the user types. Unfortunately this had to be removed for the reasons listed here: [#346 Disable and remove autoFormat feature](https://github.com/jackocnr/intl-tel-input/issues/346). **autoHideDialCode** Type: `Boolean` Default: `true` If there is just a dial code in the input: remove it on blur or submit, and re-add it on focus. This is to prevent just a dial code getting submitted with the form. Requires `nationalMode` to be set to `false`. **autoPlaceholder** Type: `String` Default: `"polite"` Set the input's placeholder to an example number for the selected country, and update it if the country changes. You can specify the number type using the `placeholderNumberType` option. By default it is set to `"polite"`, which means it will only set the placeholder if the input doesn't already have one. You can also set it to `"aggressive"`, which will replace any existing placeholder, or `"off"`. Requires the `utilsScript` option. **customPlaceholder** Type: `Function` Default: `null` Change the placeholder generated by autoPlaceholder. Must return a string. ```js customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) { return "e.g. " + selectedCountryPlaceholder; } ``` **dropdownContainer** Type: `String` Default: `""` Expects a jQuery selector e.g. `"body"`. Instead of putting the country dropdown next to the input, append it to the element specified, and it will then be positioned absolutely next to the input using JavaScript. This is useful when the input is inside a container with `overflow: hidden`. Note that the absolute positioning can be broken by scrolling, so it will automatically close on the `window` scroll event. If you have a different scrolling element that is causing problems, simply listen for the scroll event on that element, and trigger `$(window).scroll()` e.g. ```js $("#scrollingElement").scroll(function() { $(window).scroll(); }); ``` **excludeCountries** Type: `Array` Default: `undefined` In the dropdown, display all countries except the ones you specify here. **formatOnDisplay** Type: `Boolean` Default: `true` Format the input value (according to the `nationalMode` option) during initialisation, and on `setNumber`. Requires the `utilsScript` option. **geoIpLookup** Type: `Function` Default: `null` When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that looks up the user's location. Also note that when instantiating the plugin, we now return a [deferred object](https://api.jquery.com/category/deferred-object/), so you can use `.done(callback)` to know when initialisation requests like this have completed. Here is an example using the [ipinfo.io](https://ipinfo.io/) service: ```js geoIpLookup: function(callback) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; callback(countryCode); }); } ``` _Note that the callback mus