frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【JS不要】cssのみでtelリンクを無効にする方法

スポンサードリンク


スポンサードリンク


電話番号をかけさせたいときのhtmlは以下のようにします。

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

しかしこれだと、PCの時でもリンクしてしまい、レスポンシブデザインで制作している時は、スマホのみに対応させたいですよね。

以下のようにすれば、cssのみでPC→電話リンク無効、スマホで電話リンクが実現できます。
(768pxをブレークポイントとします)

.tel a, .mail a {
    cursor: default;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .tel a, .mail a {
        pointer-events: auto;
    }
}

pointer-events: noneはdrag、hover、click等のイベントを無効化します。
また、cursor: default;で標準のマウスカーソルを指定します。

スマホ幅の時はpointer-events: auto;にしてイベントが起きるように戻します。

普段JSでtelリンクを無効にしていたのでこの方法を知って便利に思いました。

しかしやはり問題は、対応ブラウザ。IEは11からがサポートされています。

Can I use... Support tables for HTML5, CSS3, etc

IE10以下でも対応する必要があればJSで書いた方がよさそうです。
常軌の方法だとタブでクリックできてしまうのでJSが結局無難ですね。

    function setTelDisable(){
        var $tel = $('a[href^="tel:"]');
        $tel.attr('tabIndex', -1);
        $tel.on('click', function(e){
            if($(window).width() > 768){
                e.preventDefault();
            }
        });
    }
    setTelDisable();

タブでフォーカスすることを防ぐためにtabIndexに-1を指定しています。

参考になれば幸いです。