Posted in Frontend

Stop calling me!

Every now and then a visitor will complain that their phone parses any sequence of numbers on a site as a phone number. This functionality is added by the client and when it works as intended it can be very helpful. Let’s not break it, or employ elaborate hacks to circumvent it, just because someone insists on operating their touch screen with the entire palm and tries to call the span of World War 2 as a result.

First of, we can turn off phonenumber recognition globally by adding the following meta-tag to the head.

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

This makes a lot of sense in the context of an application where content is limited and actual phonenumbers can easily be identified from code and wrapped in links with “tel”-qualifiers in the href attribute.

<a href="tel:+4672506XXXX">Definitely a phone number<a/>

However, in a content-heavy solution with multiple contributors, phone numbers are bound to slip through un-linked, and now you’ve gone and ruined perfectly good functionality. Also, sometimes solutions comes with tons of content already in use. And sometimes nobody wants to go through all that content and link phone numbers manually.

So, a solution that works the other way around is to find everything you know for sure are not phone numbers and apply the css-rule pointer-events like so

.not-a-phone-number{
	pointer-events:none;
}

This gives us control over where the function is suspended (if applied responsibly). Note that this will prevent any click event from firing on the element itself, but not children. So don’t apply it to links or other interactive elemets.

However, since it’s a css-rule, it could easily inserted by a CMS, and thus shift the responsibility over to the owner of the content. To make sure no one accidentally makes whole pages unclickable, it’s best to make the rule tag-specifik, or at least provide an override for usual suspects like “a”, “button”, “input” etc.

.not-a-phone-number{
	pointer-events:none;
}
a.not-a-phone-number{
	pointer-events:auto;
}

Leave a Reply