デスクトップ上で電話番号へのリンクを無効にする方法
クリック可能なウェブサイトに電話番号を追加するにはどうすればよいですか？タッチをサポートしていないウェブサイトを閲覧しているときにリンクを非表示にするには.
ただし、Modernizrを使用して設定できます。方法がわかりません。
<a href="tel:1300723579"><p><img src="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を介して-他の例を参照）、誰かがリンクにカーソルを合わせると、タイトルがポップアップして「ダイヤルするにはクリック-モバイルのみ」と表示されます。そうすれば、ユーザーエクスペリエンスが向上するだけでなく、クライアントはリンク切れを理由にあなたを非難しません！
コードを2回入力するだけでいいですか？つまり...
<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>
次に、単に「display：none;」ブラウザのサイズに応じて関連するクラスに？
私は最近この同じ問題を抱えていました。この問題は、スタックオーバーフローとその他のあらゆる場所で発生します。 「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プロパティに挿入します。これにより、電話ユーザーがクリックできるようになります。
全体は次のようになります。
<!-- 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>
これは、最新のブラウザで機能します。IE 11 +。8<IE <11を含める必要がある場合、ポインタイベントはIEでの作業：
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-Answer
CSSメディアクエリを使用して、リンクとして表示する場合としない場合を制御できます。
@media(min-width:768px){
a[href^="tel:"] {
pointer-events: none;
}
}
768px以下はリンクとして機能し、その上はテキストとして機能します。
モバイル画面のクリックを無効にするだけの場合：
if(typeof window.orientation !== 'undefined'){
$('a[href^="tel:"]').on('click', function(e){
e.preventDefaults();
});
}
お役に立てれば ：）
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を返す場合、href URLの後にブラウザーが続きます。戻り値がfalseの場合、href URLは実質的に非アクティブになります。 （標準の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イベントに基づく）は、仲間のメルボーンrgbこの中に stackoverflow post
これは、ほとんどのブラウザで簡単なメディアクエリを使用して実行できるようです。このような何かが私にとって魅力のように働いています：
<style type="text/css">
#mobil-tel {
display:none;
}
@media (max-width: 700px) {
#mobil-tel {
display:block;
}
#desktop-tel{
display:none;
}
}
</style>
デスクトップリンクでは「href」を省略し、モバイルリンクでは「href」を入力します。
最善の方法を見つけました。これは古いと思いますが、これを行う非常に簡単な方法を見つけました。
以下のこのコードを使用して
<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;
}
}
現在、すべてのデスクトップサイズのページはクリックできません。
Css3メディアクエリを使用して、モバイルウィンドウを検出し、それに応じてリンクを非表示にすることができます。
@media(max-width:640px){
.your-calling-link{
display:none;
}
}
または、リンクを表示し、クリック機能を無効にするだけの場合は、jquery関数を使用します。
screen.width
または
screen.innerWidth
を使用してリンクのクリック機能を無効にします
$('.your-link').off(click);
この問題を解決するために開発した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"は、彼の "probablyphone"テスト機能に基づいて電話をかけるだけでなく、連絡先情報セクションまで下にスクロールして、ボタンに何があっても機能するようにします。
また、ポップアップを削除するために、アラートを空の関数に置き換えました。
<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>
私のアプローチは、上記の別のアプローチに似ています。考慮すべき考慮事項がいくつかあります。
- 知っているように、サポートを検出するためのプログラムによる方法はありません。これは、UserAgent文字列の解析を強制されるまれなケースです。
- これはクライアント側である必要があります。サーバー側の検出の必要はありません。
- 現在、
tel:リンクを処理できるデスクトップブラウザがあります。デスクトップ上でのChromeの動作は、最悪の場合、クリックされても何もしません。せいぜい、Google Voiceで電話をかけることができます。 - クリックしても何もしないのはChromeのフォールバック動作であるため、すべてのブラウザーでフォールバックとしてその動作を使用する必要があります。
- ページが
tel:リンクの作成を担当する場合、すべてのtel:リンクを担当し、ブラウザで自動検出を無効にする必要があります。
これらすべてを念頭に置いて、最初にmetaタグを<head>に追加することをお勧めします。
<meta name="format-detection" content="telephone=no"/>
次に、UserAgentを解析してtrueを返すJavaScript関数を定義します。ブラウザがnotをクリックするとリンクがクリックされたときにエラーページが表示されると考えられる場合にのみ：
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 Browser、Blackberry、Dorothy、Firefox Mobile、IE Mobile 、Opera Mini、Opera Mobile、and webOS。他のデバイスまたはブラウザをクリックしてもリンクは何もしません。
tel:リンクには国際形式を使用してください。つまり、最初の文字は+および国コードである必要があります。
モバイルデバイスが検出されたときに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" );
これをカスタムcssに入力し、1日呼び出します。
a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }
必要に応じて色を変更します。
乾杯！
この方法は、CSSを追加しなくても機能します。
aタグをspanタグなどの別のものに置き換えてみてください。もちろんモバイルブラウザ専用です。利点は、このaをCSSでクローキングせずに、リンクとして維持しながらデフォルトアクションを防止することです。 aでなくなるので、心配する必要はありません。
here の例を作成しました。太字の電話はこのように機能します。以下のコードを参照してください。
ブラウザーがモバイルかどうかを定義するために、回答者の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);
});
}