CODEWITHSUNDEEP
html
wuno
wuno

Reputation: 9865

Make Certain Phone Numbers Not Clickable In Webpage For Mobile

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

Upvotes: 0

Views: 4818

Answers (3)

codeWithMe
codeWithMe

Reputation: 892

Just add a simple html meta-tag:

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

Upvotes: 2

wuno
wuno

Reputation: 9865

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.

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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;
    }
}

Upvotes: 0

Related Questions