デスクトップで電話番号へのリンクを無効にする方法は？ -ウェブ、電話

クリック可能であるが、タッチをサポートしていないWebサイトを閲覧しているときにリンクを非表示にする電話番号をWebサイトに追加するにはどうすればよいですか。

ただし、Modernizrを使用して設定することはできます。方法がわかりません。

<a href="tel:1300723579"><p><img src="/images/assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

回答：

私はちょうどこの問題を扱っていて、見上げていました解決策、そして私はこのスレッド（および他のいくつか）を見つけました。私はそれらのどれも正しく動作させることができなかったことを告白しなければなりません。私は何か間違ったことをしていると確信していますが、私はチートを見つけました。

他の人が指摘しているように、CSSを変更して表示されているリンク表示を非表示にします（color, text-decoration, cursor）は最初の最も簡単なステップです。チートは定義することです title のために tel リンク。

<p>Just call us at <a class="cssclassname" href="tel:18005555555"
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>

これを行うことにより、目に見えるインジケーターだけでなく偽装されたリンクの（CSS経由-他の例を参照）が、誰かがリンクにカーソルを合わせると、タイトルがポップアップ表示され、「CLICK TO DIAL-MobileOnly」と表示されます。そうすれば、ユーザーエクスペリエンスが向上するだけでなく、クライアントがリンク切れであると非難することもありません。

コードを2回入れるだけでいいですか？つまり..。

<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>

次に、「display：none;」だけです。ブラウザのサイズに応じて、関連するクラスで？

私は最近これと同じ問題を抱えていました。この問題は、stackoverflowやその他のあらゆる場所で発生します。 「tel：」プレフィックスを非表示にして、通常のブラウザで爆発しないようにするにはどうすればよいですか。良い単一の答えはありません。

私はそれをこのようにしてしまいました：

まず、メタ言語を使用して、useragent文字列に基づいてブラウザーとモバイル（php / coldfusion / perlなど）をフィルター処理します。

regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT

これにより、デスクトップブラウザと電話のif / else条件がわかります。

次に、私のhrefタグは次のようになります。 <a class="tel" id="tel:8005551212" href="">800-555-1212</a>

CSSを使用して、デスクトップスタイルシートの.telクラスのスタイルを設定し、デスクトップブラウザへのリンクのように見えないようにします。電話番号はクリックできますが、わかりにくく、何もしません。

/* this is in default stylesheet, styles.css: */
.tel{
text-decoration:none;
color: #000;
cursor:default;
}
/* it should be re-styled in mobile css: */
.tel{
text-decoration: underline;
color: #0000CC;
cursor:auto;
}

最後に、モバイルリンクで少しjqueryを実行します。 jQueryはa.telクラスからIDを取得し、それをhrefプロパティに挿入します。これにより、電話ユーザーはIDをクリックできるようになります。

全体がこのように見えます：

<!-- get regular CSS -->
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="Screen" />

<!-- get user agent in meta language. and do if/else on result.
i"m not going to write that part here, other than pseudocode: -->

if( device is mobile ) {

<!-- load mobile CSS -->
<link rel="stylesheet" href="styles/mobile.css" type="text/css" media="handheld" />

<!-- run jQuery manipulation -->
<script>
$(function(){$("a.tel").prop("href",$("a.tel").prop("id"));});
</script>
}

<p> Call us today at <a class="tel" id="tel:8005551212" href="">800-555-1212</a>!</p>

このアプローチの1つの注意点：IDは一意である必要があります。リンクするページに重複する電話番号がある場合は、IDを名前に変更してから、jQueryを使用してそれらをループします。

私にとって、新しいクラス/セットアップのない最も簡単でありながら最も単純な方法は、cssを使用することです。

a{
color: #3399ff;
}

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: none;
color: #000;

pointer-events: none;
cursor: default;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) {
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: underline;
color: #3399ff;

pointer-events: auto;
cursor: pointer;
}
}

HTMLは次のようになります。

<a href="tel:+123-456-7">(+12)3 456 7</a>

これは、最新のブラウザとIE11以降で機能します。 8 <IE <11を含める必要がある場合は、ポインターイベントがIEで機能しないため、JavaScriptに以下を追加します。

var msie = window.navigator.userAgent.indexOf("MSIE ");

if (msie > 0){
var Elems = [], Tags = document.querySelectorAll("a[href^="tel"]");

//Nodelist to array, so we"re able to manipulate the elements
for (var i = 0; i < Tags.length; i++ ) {
Elems[ i ] = Tags[ i ];
}

for(var i = 0; i < Elems.length; i++){
Elems[ i ].removeAttribute("href");
}
}

編集：私はあなたのために役立つかもしれない別のスレッドで別の答えを見つけました- SO-回答

私はModernizrを使用してこれで成功しました、特に touch テスト。タブレットやタッチ対応のラップトップには何の役にも立たないという点で完璧なソリューションではありませんが、ほとんどのデスクトップブラウジングの状況で機能します。

HTML：

Call us at: <a href="tel:1-800-BOLOGNA" class="call-us">1-800-BOLOGNA</a>

CSS：

.no-touch a.call-us {
color: black;            /* use default text color */
pointer-events: none;    /* prevents click event */
cursor: text;            /* use text highlight cursor*/
}

上記のCSSは、 class="call-us" デスクトップの大部分をカバーする非タッチデバイス。

ご了承ください pointer-events 最新のすべてのブラウザでサポートされていますが、IEはバージョン11以降でのみサポートされています。を参照してください 互換性チャート.

まだ不完全な別の解決策は、使用することです Modernizr.mq に加えて Modernizr.touch 画面の幅とタッチ機能を検出し、次に、jQueryを使用して電話リンクを挿入します。このソリューションは、電話のリンクをソースコードから除外し、特定の幅よりも小さいタッチデバイスにのみ表示されます（たとえば、720pxはほとんどの電話をカバーしますが、ほとんどのタブレットは除外します）。

最終的に、ここで防弾ソリューションを考え出すのはブラウザベンダー次第です。

（かなり長いことが判明している）議論に2セントの価値を追加すると思っただけです。

私は基本的にonClickイベント（リンク上）を使用しますJavascriptを実行して、ブール値のtrueまたはfalseを返します。戻り値がtrueの場合、つまり、デバイスが電話であるかどうかをテストする変数または関数が値trueを返す場合、hrefURLの後にブラウザが続きます。戻り値がfalseの場合、hrefURLは事実上非アクティブになります。 （標準のHTML動作、HTML5よりずっと前。）

これが私が意味することです：-

<html>
<head>
<title>tel markup example</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <!-- Does not really matter what version of jQuery you use -->
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && "ontouchstart" in document.documentElement);
function initialize() {
if ( !probablyPhone ) {
alert ("Your device is probably not a phone");
( function( $ ) {
$( ".call" ).css ( "text-decoration", "none" );
$( ".call" ).css ( "color", "black" );
$( ".call" ).css ( "cursor", "default" );
} )( jQuery );
}
}
</script>
</head>
<body onLoad="initialize();">
Please ring (some fictitious number in Australia): <a href="tel://+61391112222" class="call" onClick="return probablyPhone;">+61 3 9111 2222</a>
</body>
</html>

また、リンクの再フォーマットを追加して、通常のテキストのようにユーザーに表示されるようにしたことに注意してください。

これが私が作成した要点です。

この投稿/回答を終了するために、電話を検出するための簡潔なJavaSciptコード（ユーザーエージェントとontouchstartイベントに基づく）を書いたクレジットは、仲間のMelbournianに送られます rgb これで stackoverflow post

モバイル画面のクリックを無効にしたいだけの場合：

if(typeof window.orientation !== "undefined"){
$("a[href^="tel:"]").on("click", function(e){
e.preventDefaults();
});
}

お役に立てれば ：）

私は最良の方法を見つけました。これは古いと思いますが、これを行う非常に簡単な方法を見つけました。

以下のこのコードを使用する

<a href=“tel:888-555-5555” class="not-active">888-555-5555</a>

//This is the logic you will add to the media query
.not-active {
pointer-events: none;
cursor: default;
}

CSSでメディアクエリを利用します。 したがって、すべてのデスクトップに対してメディアクエリを作成します

@media only screen and (min-width: 64em) {
/* add the code */
.not-active {
pointer-events: none;
cursor: default;
}
}

これで、すべてのデスクトップサイズのページがクリックできなくなります。

これは、ほとんどのブラウザの単純なメディアクエリで実行できるようです。このようなものは私にとって魅力のように機能しています：

<style type="text/css">
#mobil-tel {
display:none;
}

@media (max-width: 700px) {
#mobil-tel {
display:block;
}

#desktop-tel{
display:none;
}
}
</style>

デスクトップリンクでは「href」を省略し、モバイルリンクでは「href」を入力します。

これは、この問題を解決するために私が開発した単純なjqueryベースのソリューションです。説明については、コードコメントを参照してください。 https://jsfiddle.net/az96o8Ly/

// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on("click", "[href^="tel:"]", function(e){
try{
// These user-agents probably support making calls natively.
if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Do nothing; This device probably supports making phone calls natively...
} else {
// Extract the phone number.
var phoneNumber = jQuery(this).attr("href").replace("tel:", "").trim();

// Tell the user to call it.
alert("Please call "+phoneNumber);

// Prevent the browser popup about unknown protocol tel:
e.preventDefault();
e.stopPropagation();
}
} catch(e){
console.log("Exception when catching telephone call click!", e);
}
});

TattyFromMelbourneの投稿のおかげで、私は今、非常に単純なビットを使用しています。

私のボタンid = "call"は、彼の「おそらく電話」テスト機能に基づいて電話をかけますが、どちらの方法でも連絡先情報セクションまでスクロールダウンして、ボタンが何があっても機能するようにします。

ポップアップを削除するために、アラートを空の関数に置き換えました。

<a id="call" href="#contact">PHONE US</a>


$("#call").on("click", function() {
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && "ontouchstart" in document.documentElement);
var link = "callto:15555555555";
if ( !probablyPhone ) {
window.alert = function() {};}
else{window.location.href = link;}
});
</script>

css3メディアクエリを使用してモバイルウィンドウを検出し、それに応じてリンクを非表示にすることができます。

@media(max-width:640px){
.your-calling-link{
display:none;
}
}

または、リンクを表示してクリック機能を無効にする場合は、jquery関数を使用します。

screen.width

または

screen.innerWidth

を使用してリンクのクリック機能を無効にします

 $(".your-link").off(click);

cssメディアクエリを使用して、リンクとして表示されるタイミングと表示されないタイミングを制御できます。

@media(min-width:768px){
a[href^="tel:"] {
pointer-events: none;
}
}

768px未満のものはすべてリンクとして機能し、それより上ではテキストと同じように機能します。

この方法は、CSSを追加しなくても機能します。

交換してみてください a 次のようなタグを付けます span タグですが、もちろんモバイルブラウザのみです。利点は、これをクローキングしないことです a CSSを使用すると、リンクとして静止したまま、デフォルトのアクションが防止されます。それはありません a もう、心配する必要はありません。

私は」の例を作成しました ここに。そこにある太字の電話はこのように機能します。以下のコードを参照してください。

回答者の1人からコードを取り出して、ブラウザがモバイルかどうかを定義しました。そして、あなたはこれらのリンクをでマークする必要があります class="tel" または、 href 「tel：」が含まれています。 JQueryも必要です。

// define if browser is mobile, usually I use Anthony"s Hand mobile detection library, but here is simple detection for clarity
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && "ontouchstart" in document.documentElement);
if ( !probablyPhone ) {
// find all the A with "tel:" in it, by class name
$("a.tel").each(function(){
var span = document.createElement("span");

// SPAN inherits properties of A, you can also add STYLE or TITLE or whatever
span.innerHTML = this.innerHTML;
span.className = this.className;

// replace A with SPAN
this.parentNode.insertBefore(span, this);
this.parentNode.removeChild(this);
});
}

私のアプローチは、上記の別のアプローチに似ています。私が考慮に入れるいくつかの考慮事項があります：

• 私たちが知っているように、サポートを検出するための良いプログラム的な方法はありません。これは、UserAgent文字列の解析を余儀なくされるまれなケースです。
• これはクライアント側である必要があります。サーバー側の検出は必要ありません。
• 処理できるデスクトップブラウザがあります tel: リンク;デスクトップでのChromeの動作は、最悪の場合、クリックしても何もしません。せいぜい、GoogleVoiceで電話をかけることができます。
• クリックしても何もしないのはChromeのフォールバック動作であるため、すべてのブラウザでその動作をフォールバックとして使用する必要があります。
• あなたのページが作成の責任を負う場合 tel: リンク、それはすべての責任を取る必要があります tel: リンクして、ブラウザの自動検出を無効にします。

このすべてを念頭に置いて、最初に追加することをお勧めします meta あなたのタグを付ける <head>：

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

次に、UserAgentを解析して返すJavaScript関数を定義します true ブラウザがそうすると思う場合に限り ない リンクをクリックするとエラーページが表示されます。

function hasTelSupport()
{
return /Chrome/|Mobile( Safari)?/|Opera M(in|ob)i/|w(eb)?OSBrowser/|Mobile;|Tablet;/.test(navigator.userAgent);
}

次に、からその関数を呼び出します onclick リンクの属性：

<a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>

これにより tel: Chrome、Edge、iOS Safari、でクリックするリンクAndroidブラウザー、Blackberry、Dorothy、Firefox Mobile、IE Mobile、Opera Mini、Opera Mobile、およびwebOS。他のデバイスやブラウザをクリックしても、リンクは何もしません。

あなたのために国際的なフォーマットを使用してください tel: リンク。言い換えれば、最初の文字は + と国コード。

これをカスタムCSSに入力し、1日と呼びます。

a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }

必要に応じて色を変更してください。

乾杯！

モバイルデバイスが検出されたときに、javascriptを介して次のcssを追加しています。

pointer-events:none

JSコードは次のとおりです。

var a = document.getElementById("phone-number");
if (Platform.isMobile())   // my own mobile detection function
a.href = "tel:+1.212.555.1212";
else
$(a).css( "pointer-events", "none" );

@media screen {.telephone {pointer-events: none;}}