WEB Tips デザイン・コーディング

電話番号,SMSリンクの設定とPCで無効にする方法

本記事にはプロモーションが含まれています。

電話番号,SMSリンクの設定とPCで無効にする方法

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

iPhone,Androidなどスマホで電話番号をタップした時に電話がかけられるようする設定とSMSを送る設定と、PCではリンクは無効にする方法のまとめです。

電話番号リンクのタグ

通常のaタグの場合:

<a href="tel:0312345678">03-1234-5678</a> 

buttonタグの場合:

<button type=“button” onclick="location.href='tel:0312345678'">電話をかける</button>

aタグ内の電話番号はハイフンありでもリンクとして認識されます。

iOSの自動リンクを無効にする

iOSではaタグに数字と記号の組み合わせがあると自動的に電話番号と判断されます。

この機能は便利ではありますがISBN番号を誤認識してしまったり、Androidでは自動認識されないため機能を無効にして手動でリンクを張るのが一般的です。

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

PCでは電話リンクは無効にしてスマホのみでタップさせる

メディアクエリーでaタグのクリックイベントを無効にします。

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

クリックイベント無効に「pointer-events」を「none」に設定します。このままではカーソルがリンクを表す指マーク(pointer)のままのためcursor:defaultを設定し、リンクでないことを指定します。

[pointer-events]はIE10以下は対応していません。>>>caniuse

また、クリックイベントを無効にするだけなので、キーボードによる操作は無効にならないようです。

jQueryで設定する方法

var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

リンクをスマートフォン端末以外では無効にする(Qiita)

jQueryでユーザーエージェントを判別してクリックを無効にする方法が結構紹介されているのですが、私の環境(Mac,Chrome)ではFace Timeを起動を促すメッセージが表示され、うまく動作しませんでした。

SMSを送るリンク

電話発信できるだけでなく、ショートメールを送ることもできます。

<a href="sms:09012347890">SMS送る</a>

メッセージをつけるには(iOS)

<a href="sms:09012347890&body=送りたいメッセージ">SMS送る</a>

番号の後に「&body=」でメッセージを入れます。

メッセージをつけるには(Android)

<a href="sms:09012347890?body=送りたいメッセージ">SMS送る</a>

番号の後に「?body=」でメッセージを入れます。

iOSとAndroidで記述が違うので注意が必要ですね

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-