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リンクから電話をかけることが可能です。