Remove hyperlinks for phone numbers

ionic-v1
1

Hi. I have stumbled across a CSS class in the past that I can apply that removes hyperlinks from text however I can’t seem to find it. I have some text that is a series of numbers and phone devices thinks that it is a phone number and will make it a hyperlink to allow the dialer to handle it. Can someone point me to the class that removes this formatting (if it exists)? If not, i blame it on late nights of inspecting Ionic CSS.

Thanks,
Tim

2

Not sure if this is what you’re looking at, but there is the

pointer-events: none;

That prevents any link from being interacted. Add to this some cursor default, color black, and you should be good… I guess.

3

That get’s me almost there, thank you! The hyperlink can’t be clicked now however it is still styled blue and underlined. cursor: and color: did not style the link.

5

Looking for a real solution I also found this : http://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari

May be worth looking at (one of the answers even speaks of phonegap).

6

Found an even better solution. No CSS or DOM manipulation. Just use a meta tag

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

plopped that in the head of the index page and problem solved! No more phone number detection in my app; no my hyperlinks to launch the dialer. Thank you for your help!

8 Likes
7

Haha exactly the solution from the link I found at the same time, good job ! Have an awesome time coding :smile:

8

Thanks again! All coding is happy coding when it comes to Ionic :smile:

9

I could not use any of the proposed solutions above for Android, any idea anyone ?

10

Hi I am having the same issue on ios there is a text I display in the footer with a amount like 999999 .The same is getting displayed as a link on ios .Also when I am changing the value of this scope variable the same div (below) gets appended …

<div class="bar bar-footer bar-balanced">
<i class="pull-left">Total Assets under management : $ {{totalAUM}}</i>
</div>

Can someone please help

11

like TechnoTim mentioned --> use:

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

yup thanks that worked seemed I put the same at the wrong location … my bad :expressionless:

13

**my problem is when i set text-decoration: none; i see in ionic view blue and underline link !! **

*it’s Worked for me when i give that style *

a {
text-decoration: none !important;
}