Basic Usage

Just place the {{intl-tel-input}} component in the handlebars template, as you would have guessed.

Code

{{intl-tel-input}}

Result

The component derives from Ember.TextField, anything you can do with the input helper can also be done with this component.

Code

{{intl-tel-input value="555-5555"}}

Result

With Utilities Script

With the utilities script included, the autoFormat and autoPlaceholder options are automatically enabled. The rest of the examples assume the utilities script is included.

Code

// Brocfile.js

var app = new EmberAddon({

  intlTelInput: {
    includeUtilsScript: true, // default to false
  },

});

{{intl-tel-input}}

Result

Properties Binding

Use the following properties for binding:

value for input value
selectedCountryData for data of the currently selected country
number for formatted phone number
extension for the extension part of the number
numberType for the type of the current number
isValidNumber for the validity of the number
validationError for information about a validation error

Code

{{intl-tel-input
  allowExtensions=true
  value=value
  selectedCountryData=selectedCountryData
  number=number
  extension=extension
  numberType=numberType
  isValidNumber=isValidNumber
  validationError=validationError}}

Result

{{value}}:
{{selectedCountryData.name}}:
{{selectedCountryData.iso2}}:
{{selectedCountryData.dialCode}}:
{{number}}:
{{extension}}:
{{isValidNumber}}:: false
{{validationError}}:

Lookup User's Country

intl-tel-input provides a convenient way to look up the user's country based on their IP addresses. This example uses Telize for demonstration.

Code

// controller

geoIpLookupFunc: function(callback) {
  $.getJSON('//www.telize.com/geoip')
   .always(function(resp) {
     if (!resp || !resp.country_code) {
       callback('');
     }

     callback(resp.country_code);
   });
}

{{intl-tel-input
  defaultCountry="auto"
  geoIpLookup=geoIpLookupFunc}}

Result

Credits

This is a wrapper library. It simply wraps the API of the original jQuery plugin created by Jack O'Connor into an Ember.js component.

The original jQuery plugin also depends on several other open-source libraries:

Flag images from region-flags
Original country data from mledoze's World countries in JSON, CSV and XML
Formatting/validation/example number code from Google's libphonenumber
Lookup user's country using ipinfo.io

~~This demo page uses Telize for a fast, SSL-supported, and FREE Geo IP service.~~

Telize no longer provides free services due to heavy abuse. This demo page is now using ipinfo.io instead.

The layout and color theme of this very documentation page comes from Twitter's Bootstrap and Ember.js, respectively.

International Telephone Input Ember Addon

Basic Usage

Code

Result

Code

Result

With Utilities Script

Code

Result

Properties Binding

Code

Result

Lookup User's Country

Code

Result

Credits

International Telephone Input
Ember Addon