Fri

06

Mar '09

Better iPhone automatic number dialling from a webpage

In Safari on iPhone, phone numbers are automatically detected and transformed into links that dial the phone number when tapped

which is great, but doesn’t work with numbers formatted with some non-numeric characters (the example which prompted me here was using brackets around the ‘0’ in UK phone numbers when also showing the country code, a common format used in the UK at least for displaying phone numbers to an international audience – such as ‘+44 (0) xxx xxx xxxx’.

So I wrote a quick bit of JQuery to wrap a link around any microformatted telephone numbers (as specified in the hCard Microformat Specification) on the page using the ‘tel:’ scheme for the link (to notify MobileSafari that this is a telephone number to use), and reformatting the phone number as required to get rid of the brackets.

$(document).ready(function() {
   	/* check for iPhone */
   	var agent=navigator.userAgent.toLowerCase();
	var is_iphone = ((agent.indexOf('iphone')!=-1));
	
	
	if (is_iphone) {
	
		/* iPhone telephone number formatting */
		/* adds 'tel:' scheme formatted phone number to all microformatted telephone number on the page */
		$('.tel .value:not(.nodial)').each(function(){
			var telNo = $(this).text().replace(/\(.*\)/,'').replace(/\s+/g,'');
			var wrapLink = '<a href="tel:'+telNo+'"></a>';
			$(this).wrap(wrapLink);
		});
	
	}
   } 
);

Code explanation

The first part of the code checks that the browser is indeed an iPhone (as the ‘tel:’ scheme is not supported in other browsers and throws an error if triggered on them – confusing for the user.)

Each microformatted telephone number (a phone number string descendent of a ‘value’ class which itself is descendant of a ‘tel’ class), then gets wrapped with a link with the scheme ‘tel:’ followed by the number itself, minus any brackets (and whatever they contain) and any whitespace.

You can specify ‘nodial’ as a class on the same element as the ‘value’ class is specified to override this functionality (i.e. to explicitly mark a number not to be made into a link).

For more information on the ‘tel:’ scheme see from How do I dial a phone number from a webpage on iPhone? – ADC1

Examples

<p class="tel"><span class="type">Work</span>Tel: <span class="value">+44 (0) 123 45678</span></p>

becomes

<p class="tel"><span class="type">Work</span>Tel: <span class="value"><a href='tel:+4412345678'>+44 (0) 123 45678</a></span></p>

but the following is unaffected (as the ‘nodial’ class is present)

<p class="tel"><span class="type">Work</span>Tel: <span class="value nodial">+44 (0) 123 45678</span></p>

Stopping MobileSafari from doing it’s number thing automatically

You can also specify a meta tag to stop MobileSafari from attempting to apply this automatic number recognition if you want to control exactly which phone numbers (or other number strings) it affects:

<meta name="format-detection" content="telephone=no" />

(from How do I disable automatic detection of phone numbers in webpages? – ADC1).

Update 8th March 2011

In response to Paul’s comment below (#3) here’s a ‘complete’ but very minimal page example of the code in action (the script should be external to the html file and the vCard is incomplete and therefore invalid – see the Microformats site linked above for the full syntax and vCard spec):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>

<!-- Grab Google CDN's jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<!-- The script - this should really go in your normal main script file -->
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function() {
	   	/* check for iPhone */
	   	var agent=navigator.userAgent.toLowerCase();
		var is_iphone = ((agent.indexOf('iphone')!=-1));
		
		
		if (is_iphone) {
		
			/* iPhone telephone number formatting */
			/* adds 'tel:' scheme formatted phone number to all microformatted telephone number on the page */
			$('.tel .value:not(.nodial)').each(function(){
				var telNo = $(this).text().replace(/\(.*\)/,'').replace(/\s+/g,'');
				var wrapLink = '<a href="tel:'+telNo+'"></a>';
				$(this).wrap(wrapLink);
			});
		
		}
	   } 
	);
//]]>
</script>

</head>
<body>

<div class="vcard">
	<p class="tel">My test telephone number: <span class="value">+44 (0) 207 1234 567</span></p>
</div>

</body>
</html>

1 Free ADC membership required to view some of the Safari Reference Library documentation.

5 Comments

gravatar#1 Brian

Do you know if there’s any way to include descriptive text on the iphone ph# popup window?

posted by Brian, May 14, 07:18 PM

gravatar#2 James

Not as far as I can tell – I tried adding test text to ‘title’, ‘id’ and ‘name’ attributes on the generated link to see if anything affected the popup but no luck.

posted by James, May 15, 09:56 AM

gravatar#3 Paul

Hi, came across your page through a google search, this exactly describes the problem that we are having here – can you possibly explain to this complete novice how to get the code into the phone –

posted by Paul, Jan 13, 11:30 AM

gravatar#4 James

Hi Paul, I have posted an update/minimal demo in the body of the post above – essentially you need to load JQuery (if you aren’t already), either locally or from a CDN (as shown). You then insert the JQuery Javascript code which I initially wrote about, and all telephone numbers on the page which are formatted using the Microformats syntax (see above) will get the magic treatment on iPhones! Hope this helps – James.

posted by James, Mar 9, 09:50 AM

gravatar#5 Beren

Excellent snippet.. thanks!

posted by Beren, Aug 17, 05:53 PM

Leave your comment

Please keep all comments and opinions polite and on topic. Consider signing up for a Gravatar (Globally Recognized Avatar) to make the web a more personable place. Your email address is required to post, but it won't be displayed to anyone else.

your comment