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:’ schema 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:' schema 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:’ schema 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 schema ‘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:’ schema 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).
1 Free ADC membership required to view some of the Safari Reference Library documentation.
2 Comments
Do you know if there’s any way to include descriptive text on the iphone ph# popup window?
posted by Brian, May 14, 06:18 PM
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, 08:56 AM