0

I know to make a phone number clickable on mobile web devices you can use this format.

TF: (800) 369-3212

P: (214) 331-4381

F: (214) 339-9840

but if you want to block all phone numbers from being clickable you can do this with a meta tag.

But now that all of my phone numbers are in the format to be clickable how can I target only the fax number to make it NOT clickable on all mobile devices?

I realize I could make each one a link but this would make them clickable on desktop too.

I need them to be all the same format. Only clickable on mobile devices. Fax numbers NOT clickable

enter image description here

enter image description here

1
  • Maybe I'm missing something, but just formatting numbers in a particular way do not make them clickable. At least not on the phone I'm using at this very moment. That's probably a phone browser-specific feature. The only way to make phone numbers "clickable" on my phone is to use a link with the tel: prefix. Apr 23, 2016 at 4:30

3 Answers 3

2

Just add a simple html meta-tag:

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

The solution is to add a class to the fax number. I wrapped the fax number in a span then added the class .fax to it.

Now I can prevent all of the class fax from being clickable with a little javscript

document.getElementByClassName("fax").addEventListener("click", function(event){
    event.preventDefault()
});

If a phone number is written in a recognizable phone number format, then most smart phones would automatically recognize the telephone number and convert it into a link. However, if you want the number to be replaced by an anchor text, or you want to link an image to a phone number, then you would want to manually create the link. The proper format to write a telephone number is: Country Code> <(Area Code) > Example: +1 (555) 555-1212 However, most smart phones would also recognize these formats: +15555551212 +1.555.555.1212 555-555-1212 555 555 1212

This will work if you have formatted your numbers to be clickable and you want to keep some of them from being clickable on mobile devices.

Read This To Learn To Make Numbers Clickable Format

This will make your numbers clickable on mobile only on modern browsers. Which means that you won't be able to click them on desktop websites. Which tel does allow.

Metatag to turn off allowing numbers to be clickable on IOS

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

The problem with the metatag is that it will not allow any numbers from being clickable. The best solution I have found is the javascript at the top of this answer. I would of liked a solution not using javascript.

If someone has a better solution. Please share.

0

Have a class to your FaxNumbers let's say fax-number. Then in media query you can remove the mouse events on all elements with this class in mobile devices.

@media only screen and (max-width: 500px) {
    .fax-number{
        pointer-events: none;
    }
}
10
  • Why would this question get down voted? I cant find anything on the internet with a reasonable solution to this but your answer. Everything else I have found does not work.
    – wuno
    Apr 23, 2016 at 2:19
  • Does not work?? That is weird. Check if the above css rule is applied to the element... Inspect the element and check. May be the window width is not less than 500px or some other rule is overriding this one.. Have a check and let me know Apr 23, 2016 at 2:23
  • This for sure does not work. I just tried it ten different ways.
    – wuno
    Apr 23, 2016 at 2:25
  • I tried with the media query. Without. Changed the width to 600. put it on a p tag around the number. added a span around the number. Still lets me click from a nexus 6p and an Iphone.
    – wuno
    Apr 23, 2016 at 2:26
  • 1
    But then how can a click event occur on a p tag?? Apr 23, 2016 at 3:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.