【jQuery】電話番号リンクをタブレット・PCで無効にする

スマホユーザーを意識して追加した電話番号リンクタグ。

<a href="tel:090111122222">電話する</a>

スマホではあると便利ですが、タブレットやPCだとタップしても動作して欲しくないですよね。

そういうときは、jQueryを使ってスマホでだけ電話番号リンクを有効化すると良いです。

電話番号リンクをタブレット・PCで無効にするコード

タブレット・PCでリンクをクリックしても電話を掛けないようにするためのコードは以下です。

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

if (!isMobile) {
  $('a[href^="tel:"]').on('click', function(e) {
    e.preventDefault();
  });
  $('a[href^="tel:"]').css('pointer-events', 'none');
  $('a[href^="tel:"]').css('cursor', 'default');
}

このコードをJSファイルに貼り付けておくだけでOK。
aタグ側は何も変更する必要はありません。

詳しく知りたい方向けの解説

let ua = navigator.userAgent.toLowerCase();

まずユーザーエージェントを取得しています。

ユーザーエージェントとは、サイト閲覧者が利用しているブラウザやOSのデータのこと。
バージョン情報も含めて記録されているので、ユーザーの環境判定に使えます。

取得したユーザーエージェントには大文字・小文字が混ざっているので、toLowerCase()を使って小文字に統一。

let isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

取得したユーザーエージェント内に「iphone」もしくは「android」などスマホやタブレットを示す文字があるかどうかをチェックするコードです。

スマホ・タブレットであれば変数isMobileにtrueが、PCであればfalseが代入されます。

if (!isMobile) {
  //省略
}

isMobileがfalse、つまりPCのときにだけ { } 内を実行します。

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

aタグのhref属性がtel:で始まるものがクリックされたときに、e.preventDefault()でクリック時にする処理を無効化しています。

[href^="xxxx"]のように、=の前に^をつけると「xxxxで始まるもの」という形で条件指定ができます。

$('a[href^="tel:"]').css('pointer-events', 'none');
$('a[href^="tel:"]').css('cursor', 'default');

最後に、見たときにリンクであるように誤解されないよう、CSSを書き換えて見た目部分を調整しています。

CSS側でクリックを無効にしつつ、カーソルを上においても形がデフォルトのままでわからないようにしたコードです。

まとめ

指定のコードを入れておくだけで、タブレット・PCにおいて意図しない不要な挙動を防ぐことができます。

導入もすごく簡単なので、ぜひ活用してください。