jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法

jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法

jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • このエントリーをはてなブックマークに追加

a要素に「tel:0312345678」というような電話番号を入れることで、そのリンクをタップした時に電話をかけることができるようになります。

<a href="tel:0312345678">電話をかける</a>

PCで閲覧している時には、このリンクを無効化しておきたい場合もあるかと思います。そこで今回は、スマホ以外で電話発信用のリンクを無効化する方法をご紹介いたします。

スポンサードリンク

jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法

</body>の直前に以下を記述することで、スマホ以外では電話発信用のリンクが無効化されます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
if (!isMobile) {
$('[href^="tel:"]').on('click', function(e) {
e.preventDefault();
});
}
</script>

併せて、CSSでマウスポインターの形状を指定しておきましょう。

a[href^="tel:"] { cursor: default; }

クリッカブルマップの場合は、以下のように指定します。

area[href^="tel:"] { cursor: default; }

これで、PCでマウスカーソルを合わせた場合に、マウスカーソルがポインターに変形しなくなります。

あとがき

そこまで神経質になる必要はないかもしれませんが、クリックできるように見えるのに、クリックしても何も起こらないというのは、ユーザーのストレスに繋がります。

PCで見た時もリンクが有効になっていて煩わしいと感じている場合は、ぜひお試しください。

なお、PCであってもFaceTimeなどのアプリがインストールされている環境では、telリンクから電話をかけることが可能です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。