disable the option to call on your iPhone

Hello there,
I am currently working on a project which has a mobile browser version.
I have noticed that on iPhone, all numbers are callable by default.
My goal is to identify and select all callable numbers while disabling the call option.
For instance:

<div>123456789</div>
<span>123456789</span>
<p>123456789</p>
<p>1234,567,89</p>

I'm trying to figure out if there's a CSS solution that can help me target only the affected numbers that trigger the call option (without affecting all numbers) when clicked. Is this possible with CSS?

htmlcss

Answer №1

To stop IOS from automatically formatting phone numbers on your webpage, insert the following code snippet into the <head> section:

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

This will ensure that the phone numbers retain their original format.

If you are unable to edit the HTML directly, you can apply CSS to prevent the styling of phone numbers and disable clicking on them with the following code:

a[href^=tel]{
    text-decoration:none;
    color:inherit;
    pointer-events: none;
    cursor: default;
}

Using this CSS should help maintain the appearance and functionality of phone numbers on IOS devices.

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

Avoid shifting focus to each form control when the tab key is activated

I have a form where users need to be able to delete and add items using the keyboard. Typically, users use the tab key to move focus from one element to another. However, when pressing the tab key in this form, the focus only shifts to textboxes and not t ...

javascripthtmlcssbootstrap-5

Retrieve JSON data within an HTML element, where the element is sourced from an AJAX GET response

What is the best way to extract JSON data from the response below? $.get('http://localhost:8000/json', function(response) { alert(response); }); The response is as follows: <div id="dom-target" style="display: none;"> {"logo":"log ...

javascriptjqueryhtmljsonajax

Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here? ...

csslayout

Rotate the text 180 degrees on hover using either jquery or css

One of our clients is requesting a flip effect on the menu items of their website. When hovered over, the items should flip upside down on the horizontal axis and then return to their original position. An example similar to what they're looking for c ...

jquerycsstextflip

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

I encountered an error when trying to connect my project to a live database. The error message stated: the name ‘textbox’ does not exist in the current context. How can I resolve this issue? Below is the aspx.cs code that I used for the connection, wh ...

htmlcsswebforms

Guide on how to save the selected user option in a PHP form

I'm having trouble getting the form to automatically set itself based on the state selected by the user from a drop-down menu of 50 states. The user's info, including their chosen state, is stored in an info array with $state. Everything else dis ...

phphtml

html inserting line break using label

I am attempting to dynamically set text to a label using jQuery. However, I am having trouble getting the <br> or \n to create new lines. Instead, all the text displays on the same line and wraps around. If you want to see my code in action, ch ...

javascriptjqueryhtml

Updating a data table using POST values in ASP.NET: A step-by-step guide

I am working on updating values in my database and want to ensure that my script is functioning correctly. In order to check, I created a POST method to send the values and confirm they are being received. https://i.sstatic.net/h0IH5.gif Now, my question ...

javascripthtmljqueryasp.netasp.net-mvc

Enhance the user experience by incorporating a tooltip into the input field using Bootstrap 5

I have implemented custom CSS to display an error icon with a tooltip, but after upgrading to Bootstrap 5, I am unable to achieve the same result. Expected: https://i.sstatic.net/Mjvik.png .icon { position: absolute; bottom: 6px; right: 10.5px; ...

htmlcssangularbootstrap-5

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

Transitioning attention to an svg's group element

Focusing on Specific Elements in an SVG My SVG is large and complex, generated by graphviz. When I open the SVG in a browser and search for text, the focus shifts to show the desired text. I want to achieve this behavior by creating a link to a specific ...

htmlsvghyperlink

Contrasting the addition of an onClick listener through Jquery versus utilizing an HTML onclick attribute

I found this interesting piece of code that I want to share with you all: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.12.4.js"></script> <title> HelloWorld JQuery </t ...

javascriptjqueryhtmlevent-handling

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...

htmlcss

Positioning with Bootstrap CSS libraries

The text next to the logo in the navbar isn't aligning properly (refer to this link for the page -> ). Furthermore, the logo isn't positioning correctly either, and this issue is present in all the navbar codes. I'm utilizing CSS bootstr ...

javascripthtmlcsstwitter-bootstrapnavbar

Delivering styled coldfusion outcomes utilising css and jquery

After using jquery to retrieve some data, I've noticed that the results are displayed correctly but the CSS is not being applied. Is there a way to style the results with CSS? function doSearch() { //Making an AJAX call to the server $.ajax({ / ...

jquerycsscoldfusion

Jquery slide animation not functioning properly

Hello, I am attempting to create a sliding effect for specific text where the slide effect adds something similar to extra spacing. The desired effect can be seen here: like margin or something, the framework being used is . My question is: Is there a wa ...

javascriptjqueryhtmlcssslide

Using AppCtrl's variable in another controller

Consider the following HTML code snippet: <html ng-app ng-controller="AppCtrl"> <head> <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> <script src="script.js"></script> </head ...

javascriptjqueryhtmlangularjs

What could be causing my css stylesheet to not function properly in Sinatra?

I'm fairly new to this, but based on my research, this code should be functioning correctly. I am attempting to link a CSS stylesheet to an .erb file. Here is the code snippet I am using: <link rel="stylesheet" type="text/css" h ...

htmlcssrubysinatra

The product image does not display any other images

Hey, I'm experiencing an issue and need help replicating the photo changing effect on this website: I've managed to do everything right except for the photo changing feature (1 / 2 / 3 / 4)!! Here's what I have so far: Can anyone assist m ...

javascripthtmlimage

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

javascripthtmlfor-loopsasstemplate-literals