@os33/intl-tel-input

    5.1.7 • Public • Published

    International Telephone Input Build Status

    A jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags.

    alt tag

    Table of Contents

    Demo and Examples

    You can view a live demo and some examples of how to use the various options here: http://jackocnr.com/intl-tel-input.html, or try it for yourself using the included demo.html.

    Features

    • Automatically format the number as the user types
    • 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
    • Selecting a country from the dropdown will update the dial code in the input
    • Typing a different dial code will automatically update the displayed flag
    • Dropdown appears above or below the input depending on available space/scroll position
    • Lots of initialisation options for customisation, as well as public methods for interaction

    Browser Compatibility

    Chrome Firefox Safari IE Chrome for Android Mobile Safari IE Mobile
    Core 8
    autoFormat 8

    Getting Started

    1. Download the latest version, or better yet install it with Bower: bower install intl-tel-input

    2. Link the stylesheet (note that this references the included image flags.png)

    <link rel="stylesheet" href="build/css/intlTelInput.css">
    1. Add the plugin script and initialise it on your input element
    <input type="tel" id="mobile-number">
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="build/js/intlTelInput.min.js"></script>
    <script>
      $("#mobile-number").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.

    Options

    Note: any options that take country codes should be lower case ISO 3166-1 alpha-2 codes

    allowExtensions
    Type: Boolean Default: false
    When autoFormat is enabled, this option will support formatting extension numbers e.g. "+1 (702) 123-1234 ext. 12345".

    autoFormat
    Type: Boolean Default: true
    Format the number on each keypress according to the country-specific formatting rules. This will also prevent the user from entering invalid characters (triggering a red flash in the input - see Troubleshooting to customise this). Requires the utilsScript option.

    autoPlaceholder
    Type: Boolean Default: true
    Add or remove input placeholder with an example number for the selected country. Requires the utilsScript option.

    autoHideDialCode
    Type: Boolean Default: true
    If there is just a dial code in the input: remove it on blur, and re-add it on focus. This is to prevent just a dial code getting submitted with the form.

    defaultCountry
    Type: String Default: ""
    Set the default country by it's country code. You can also set it to "auto", which will lookup the user's country based on their IP address - see example. Otherwise it will just be the first country in the list.

    ipinfoToken
    Type: String Default: ""
    When setting defaultCountry to "auto", we use a service called ipinfo which requires a special token to be used over https, or if you make >1000 requests/day. Use this option to pass in that token.

    nationalMode
    Type: Boolean Default: true
    Allow users to enter national numbers (and not have to think about international dial codes). Formatting, validation and placeholders still work. Then you can use getNumber to extract a full international number - see example.

    numberType
    Type: String Default: ""
    Specify one of the keys from the global enum intlTelInputUtils.numberType e.g. "MOBILE" to tell the plugin you're expecting that type of number. Currently this is only used to set the placeholder to the right type of number.

    onlyCountries
    Type: Array Default: undefined
    Display only the countries you specify - see example.

    preferredCountries
    Type: Array Default: ["us", "gb"]
    Specify the countries to appear at the top of the list.

    utilsScript
    Type: String Default: "" Example: "lib/libphonenumber/build/utils.js"
    Enable formatting/validation etc. by specifying the path to the included utils.js script, which is fetched only when the page has finished loading (on window.load) to prevent blocking. See Utilities Script for more information. Note that if you're lazy loading the plugin script itself (intlTelInput.js) this will not work and you will need to use the loadUtils method instead.

    Public Methods

    destroy
    Remove the plugin from the input, and unbind any event listeners.

    $("#mobile-number").intlTelInput("destroy");

    getExtension
    Get the extension part of the current number, so if the number was "+1 (702) 123-1234 ext. 12345" this would return "12345".

    var extension = $("#mobile-number").intlTelInput("getExtension");

    Returns a string e.g. "12345"

    getNumber
    Get the current number formatted to the given type (defaults to E.164 standard). The different formatting types are available in the enum intlTelInputUtils.numberFormat - taken from here. Requires the utilsScript option. Note that even if nationalMode is enabled, this can still return a full international number.

    var intlNumber = $("#mobile-number").intlTelInput("getNumber");
    // or
    var ntlNumber = $("#mobile-number").intlTelInput("getNumber", intlTelInputUtils.numberFormat.NATIONAL);

    Returns a string e.g. "+17024181234"

    getNumberType
    Get the type (fixed-line/mobile/toll-free etc) of the current number. Requires the utilsScript option.

    var numberType = $("#mobile-number").intlTelInput("getNumberType");

    Returns an integer, which you can match against the various options in the global enum intlTelInputUtils.numberType e.g.

    if (numberType == intlTelInputUtils.numberType.MOBILE) {
        // is a mobile number
    }

    Note that in the US there's no way to differentiate between fixed-line and mobile numbers, so instead it will return FIXED_LINE_OR_MOBILE.

    getSelectedCountryData
    Get the country data for the currently selected flag.

    var countryData = $("#mobile-number").intlTelInput("getSelectedCountryData");

    Returns something like this:

    {
      name: "Afghanistan (‫افغانستان‬‎)",
      iso2: "af",
      dialCode: "93"
    }

    getValidationError
    Get more information about a validation error. Requires the utilsScript option.

    var error = $("#mobile-number").intlTelInput("getValidationError");

    Returns an integer, which you can match against the various options in the global enum intlTelInputUtils.validationError e.g.

    if (error == intlTelInputUtils.validationError.TOO_SHORT) {
        // the number is too short
    }

    isValidNumber
    Validate the current number - see example. Expects an internationally formatted number (unless nationalMode is enabled). If validation fails, you can use getValidationError to get more information. Requires the utilsScript option. Also see getNumberType if you want to make sure the user enters a certain type of number e.g. a mobile number.

    var isValid = $("#mobile-number").intlTelInput("isValidNumber");

    Returns: true/false

    loadUtils
    Note: this is only needed if you're lazy loading the plugin script itself (intlTelInput.js). If not then just use the utilsScript option.
    Load the utils.js script (included in the lib directory) to enable formatting/validation etc. See Utilities Script for more information.

    $("#mobile-number").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js");

    selectCountry
    Change the country selection (e.g. when the user is entering their address).

    $("#mobile-number").intlTelInput("selectCountry", "gb");

    setNumber
    Insert a number, and update the selected flag accordingly.

    $("#mobile-number").intlTelInput("setNumber", "+44 7733 123 456");

    Static Methods

    getCountryData
    Get all of the plugin's country data - either to re-use elsewhere e.g. to populate a country dropdown - see example, or to modify - see example. Note that any modifications must be done before initialising the plugin.

    var countryData = $.fn.intlTelInput.getCountryData();

    Returns an array of country objects:

    [{
      name: "Afghanistan (‫افغانستان‬‎)",
      iso2: "af",
      dialCode: "93"
    }, ...]

    Utilities Script

    A custom build of Google's libphonenumber which enables the following features:

    • As-you-type formatting with autoFormat option, which prevents you from entering invalid characters
    • Validation with isValidNumber, getNumberType and getValidationError methods
    • Placeholder set to an example number for the selected country - even specify the type of number (e.g. mobile) using the numberType option
    • Extract the standardised (E.164) international number with getNumber even when using the nationalMode option

    International number formatting/validation is hard (it varies by country/district, and we currently support ~230 countries). The only comprehensive solution I have found is libphonenumber, which I have precompiled into a single JavaScript file and included in the lib directory. Unfortunately even after minification it is still ~215KB, but if you use the utilsScript option then it will only fetch the script when the page has finished loading (to prevent blocking).

    Troubleshooting

    Image path
    Depending on your project setup, you may need to override the path to flags.png in your CSS.

    .iti-flag {background-image: url("path/to/flags.png");}

    Customise invalid key flash
    Set the colour like this (or set to none to disable):

    .intl-tel-input input.iti-invalid-key {background-color: #FFC7C7;}

    Full width input
    If you want your input to be full-width, you need to set the container to be the same i.e.

    .intl-tel-input {width: 100%;}

    Input margin
    For the sake of alignment, the default CSS forces the input's vertical margin to 0px. If you want vertical margin, you should add it to the container (with class intl-tel-input).

    Displaying error messages
    If your error handling code inserts an error message before the <input> it will break the layout. Instead you must insert it before the container (with class intl-tel-input).

    Dropdown position
    The dropdown should automatically appear above/below the input depending on the available space. For this to work properly, you must only initialise the plugin after the <input> has been added to the DOM.

    Placeholders
    In order to get the automatic country-specific placeholders, simply omit the placeholder attribute on the <input>.

    Bootstrap input groups
    Simply add this line to get input groups working properly.

    .intl-tel-input {display: table-cell;}

    Contributing

    I'm very open to contributions, big and small! For instructions on contributing to a project on Github, see this guide: Fork A Repo.

    I use Grunt to build the project, which relies on npm. In the project directory, run npm install to install Grunt etc, then grunt bower to install other dependencies, then make your changes in the src directory and run grunt build to build the project.

    Attributions

    Install

    npm i @os33/intl-tel-input

    DownloadsWeekly Downloads

    11

    Version

    5.1.7

    License

    MIT

    Last publish

    Collaborators

    • jiansongos33
    • roger_os33