What is the method for deleting a phone number hyperlink on an iPhone?

I am encountering an issue with my mobile site, specifically with a Span element containing a phone number.

<span class="order1-button">999-120-9191</span>

The problem is that when I access the page on my iPhone, the phone number is automatically turned into a clickable link that prompts a call option when clicked.

How can I remove this feature?

You can view the issue on this Fiddle link when accessed on an iPhone.

On other devices, the phone number appears as a simple button without the clickable link, which is the desired behavior.

htmlcssiphone

Answer №1

To stop mobile Safari from converting telephone numbers into links, simply add a meta tag to your page header.

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

Answer №2

One way to control which links are ignored by the web view is by using the dataDetectorTypes property.

webview.dataDetectorType = UIDataDetectorTypeNone;

For a full list of available types, refer to the documentation.

Answer №3

Another option is to include the text-decoration:none property within the specified class.

Answer №4

Eliminate any styling related to text decorations.

<span text-decorations="none" class="order1-button">999-120-9191</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

javascriptjqueryhtmlcss

Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

I am facing an issue with twitter bootstrap tabs in my (HAML) ruby on rails project. Although the tabs are appearing, the content does not change when I click on different tabs. Additionally, some unexpected statements are showing up at the bottom of the f ...

htmlcssruby-on-railstwitter-bootstraphaml

Is there a way to set the menu to automatically open when the page loads?

Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...

javascripthtmlcss

Determine selected option in Radio Button

FORM : <form id="approvalPenambahanUserInt" name="approvalPenambahanUserInt" action="" method="post"> <div class="form-group"> <div class="col-sm-12"> <label for= ...

javascripthtmljquery

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

What could be causing the overlap between the button and the div element?

My main wrapper div contains a content div and a button. However, I'm facing an issue where the button is overlapping with the content div instead of appearing below it. The content div is styled with the following CSS: #groupMembers { position: ...

htmlcss

Smoothly automate horizontal scrolling using JavaScript

My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...

javascriptcss

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Can someone guide me on how to make a Carousel responsive using Angular?

HTML: <div class="voxel-row"> <div class="voxel-col-4"><h2 id="vagas_recentes">vagas recentes</h2></div> </div> <div id="carouselExampleControls" cl ...

htmlangularcarousel

The concept of nested labels: defining conditions for displaying specific sections of a label

Let's say I have a label that contains the following text: <label>This is a text. This is another text.</label> Is there a way to indicate that the second sentence should only be visible when a boolean value is true? For example: <la ...

htmlangularjs

Failure to validate two dates, even when they are both in date format within AngularJS

Although it may seem silly to ask, I am confused as to why this is not working. Even though all the values appear fine in debug mode. My goal is to display an error if the productionStartFrom date is before the current date. Controller scope.currentDate ...

javascripthtmlangularjs

Upload file to database and move to new location

In order to gain a clearer understanding, I have a question regarding inserting data from a form. Let's say I have the following form: <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <inp ...

phphtml

Instructions for implementing the iPhone Contacts header scroll effect on an HTML webpage

If you take a look at this jsFiddle I've set up, it should give you a better idea of what I'm trying to accomplish: http://jsfiddle.net/nicekiwi/p7NaQ/2/ Imagine the contact page on an iPhone's iOS, where as you scroll through the alphabet ...

javascriptiphonehtmlcssmootools

Choose the CSS class based on the content provided

Help needed with CSS issue. I want to target the <tr> element's class using Bootstrap classes like .success or .danger. In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to ...

javascriptcsstwitter-bootstrapsassvue.js

Concentrate on the disappeared div element following the AJAX request

Encountering an unusual issue here that has me a bit puzzled. In one of my DIV elements, I have included several links which trigger an AJAX call (using jQuery) upon being clicked. The server (Controller) then responds with HTML content, specifically a JS ...

javascriptjqueryhtmlajaxspring-mvc

Troubleshooting problem with Bootstrap navbar collapsing when certain items are not collapsed

I am currently working on creating a Bootstrap menu for a website that has certain items that should not collapse on extra-small screens. While I have made progress in implementing this feature, I have encountered an issue. When the screen size is extra-s ...

htmltwitter-bootstrap-3

New button attribute incorporated in AJAX response automatically

data-original-text is automatically added in ajax success. Here is my code before: <button type="submit" disabled class="btn btn-primary btn-lg btn-block loader" id="idBtn">Verify</button> $(document).on("sub ...

javascripthtmljquerycssajax

Choosing a single row from a Bootstrap React table

i have successfully implemented the Async Function to display data, as shown in the image. the table starts empty but gets populated after the await. However, I am facing an issue in finding a property to retrieve the selected row from the table. Is there ...

javascripthtmlreactjs

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

htmlcss

"Error message: Undefined index error when trying to decode JSON

In my database, there's a JSON file named articles.json which contains data as follows: { "articles": [ { "id": 1, "title": "a" } ] } Now, I have written a script to decode this JSON file: <?php include "inc/header. ...

phphtmlarraysjson