ipad detecting date as a telephone number and inserting a tel link

Question

I have the following for a responsive project:

<table>
            <tr>
                <td>Besteldatum</td>
                <td itemprop="description">
                    24-2-2014
                </td>
            </tr>
            <tr>
                <td>Losse editie</td>
                <td itemprop="description">
                    2014-02
                </td>
            </tr>
</table>

Strangely enough the ipad places a link in the first as if it were a telephone, check the image:

If I inspect in the ipad I see that the HTML is converted into the following:

<table>
            <tbody><tr>
                <td>Besteldatum</td>
                <td itemprop="description">
                    <a href="tel:24-2-2014">24-2-2014</a>
                </td>
            </tr>
            <tr>
                <td>Losse editie</td>
                <td itemprop="description">
                    2014-02
                </td>
            </tr>
</table>

I think the ipad is detecting this date as a telephone number and placing this link automatically. I have other links with the tel link so I would like a solution that does not cancel the other tel links.

Never seen this, can anybody help?

Answer 1

This is default behaviour in iOS. It means that users can simply click a phone number on a web page to make a phone call. Unfortunately it does pick up some non-phone numbers sometimes depending on the formatting.

You have a few options. Here are a couple. Either disable iOS phone number detection by adding this meta tag:

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

This maybe a bad idea because it will remove the phone number detection for the entire page making real phone numbers non-clickable.

or override the styles that are being applied with something like...

a[href^=tel] {
    color: #your_color;
    text-decoration: none;
    pointer-events: none;
}

If you have some genuine phone numbers on the page, you may wish to add a class to the non-phone parent in order to differentiate:

    .date a[href^=tel] {
        color: #your_color;
        text-decoration: none;
        pointer-events: none;
    }