Convert a Phone Number With Letters to Numbers for iOS Devices

Problem

Plainly marked up telephone numbers which contain letters can’t be dialed or saved on iOS devices. For example, the phone number 1-888-899-4VPI when pressed on an iPhone will try to dial 1-888-899-4.

“Sloppy” Solution

One could just wrap every phone number that contains letters in an anchor element with a tel URI scheme. <a href="tel:1-888-899-4874">1-888-899-4VPI</a> but this means all browsers will see the anchor. Most user don’t have their browser set up to dial a number when clicked so I think it’s better to add this feature for devices that are made to deal with phone numbers.

Progressive Enhancement Solution

HTML Markup

<abbr class="tel" title="1-888-899-4874">1-888-899-4VPI</abbr>

This is the recommended markup for a telephone number for an hCard microformat. The whole point of microformats is to create data portability and semantic richness with common bits of content. This is why I highly recommend using this markup structure. Also the title and class will prove to be useful in scripting our solution. Because the extra markup is useful for every browser as well as search engines we don’t have to have any guilt about adding some extra markup to achieve a usable number on an iOS device.

jQuery Code

//Create a variable for each device
var isiPad = navigator.userAgent.match(/iPad/i) != null,
    isiPhone = navigator.userAgent.match(/iPhone/i) != null,
    isiPod = navigator.userAgent.match(/iPod/i) != null;

//If browser's user agent matches then run the following code
if(isiPod || isiPhone || isiPad)
{
  //Double check device to see if it’s an iOS Device
  if (document.cookie.indexOf("iphone_redirect=false") == -1)
  {
    //Find all phone numbers that contain titles
    var originalNum = $('.tel[title]');
    //Go through the array of matched elements
    for (var i=0,ii=originalNum.length;i<ii;i++)
    {
      //originalNum[i] is needed more than once so it's faster to store as a variable
      var originalNum_i = $(originalNum[i]);
      //Get the element's title
      easyDialNum = $(originalNum_i).attr('title');
      //Make sure title isn't empty
      if (easyDialNum != "")
      {
        //Take this element and put some put in an anchor that can be dialed
        $(originalNum_i).html('<a href="tel:'+easyDialNum+'">'+$(originalNum_i).text()+'</a>');
      }
    }
  }
}
Why an Anchor Element with :tel?

This piece of code: <a href="tel:'+easyDialNum+'… is needed to make the phone number clickable since it’s been modified by JavaScript. On an iOS device phone numbers are automatically detected and made clickable, but if you make an edit to a phone number using JavaScript the iPhone will no longer auto-detect that number. For example, if you had a page with the following markup: <p>1-888-899-4874</p> the iOS device would automatically find this number and make it clickable even though it’s just marked up as paragraph, but not if you’ manipulated it with JavaScript. To make it clickable post JavaScript manipulation you have to make the number an anchor and use the tel: URI scheme.

Switch the Viewable Text to All Numbers

The script above keeps the visible number the same. Even after the script runs the user will still see 1-888-899-4VPI but when the number is clicked it will dial 1-888-899-4874. If you want the script to show the easy dial version of the telephone number after the script runs just replace this “last” line of JavaScript with this:

$(originalNum_i).html('<a href="tel:'+easyDialNum+'">'+easyDialNum+'</a>');

Need to Change One Number on the Page

Some website only have one number on the page. For example, maybe this number is in the header. The code below is for site that will only have one number within a specific div. The script runs much faster if you specify the div which the phone number will be in. For the example below I used #header.

var isiPad = navigator.userAgent.match(/iPad/i) != null,
    isiPhone = navigator.userAgent.match(/iPhone/i) != null,
    isiPod = navigator.userAgent.match(/iPod/i) != null;

if(isiPod || isiPhone || isiPad)
{
  if (document.cookie.indexOf("iphone_redirect=false") == -1)
  {
    var originalNum = $('.tel','#header'),
        easyDialNum = $(originalNum).attr('title');
    if (easyDialNum != "")
    {
      $(originalNum).html('<a href="tel:'+easyDialNum+'">'+$(originalNum).text()+'</a>');
    }
  }
}

iPad and iPod?

iPad and iPod don’t have a phone’s but numbers are still clickable so that you can add it to your address book.

iPads can add numbers to their address books

Download

A zip containing both version of the iOS EasyDial script.

Comments

One Comment so far. Leave a comment below.

Add Your Comments

Disclaimer
Your email is never published nor shared.
Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?