jQueryでaタグのtelをPCのみ削除する

電話番号に付与されるリンクについて、デザイナー・コーダーさん単位で対応策はまちまちでは
ないでしょうか？

そこで以前下記のような内容のブログを書きました。
【URL】Microsoft Edgeの電話番号にリンクが貼られる問題について

今回は上記のようにタグ内に制御する技術をするのではなく、jQueryでaタグのtelをPCのみ削除する方法をご紹介します。

<p><a class="tel" href="tel:0123456789"><span>012-345-6789</span></a></p>

重要なのは、aタグにクラスを付与することと、aタグ内の電話番号に当たるところを必ずspanで囲うこと。
ちょっと手間ですが、これしないとjQueryが効かない。

PCでの電話番号リンクについてどの方法を採るかは人それぞれなので
こんな方法もあるのかーくらいのほうがいいかもしれませんね。

jQueryはさらっと以下のような感じ。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
        $('.tel span').each(function(){
            $(this).unwrap();
        });
    }
});

これでｐCからのアクセスの場合は電話番号のリンクが効かなくなります。
あら素敵！

上記内にあるunwrap()は指定した要素の親のHTMLタグを削除する、という意味があります。
親タグのHTMLを削除するためどうしてもspanで入れ子にする必要があります。

なんかもうちょっといい方法ある気がするんですけどね！
また何かあればご紹介したいと思います。では！

Share: