制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングjavascript「tel」を指定したaタグをPCだけ削除する[jquery]

「tel」を指定したaタグをPCだけ削除する[jquery]

2014年03月12日javascript 
「tel」を指定したaタグをPCだけ削除する[jquery]記事のアイキャッチ画像

スマホのみに有効な「tel」を指定したaタグを、PCでアクセスされた時のみ削除する方法を紹介します。jqueryです。

まえがき

iPhoneやandroidは「tel」プロトコルを使用すれば、そのリンクをタップすると番号発信を行うということが可能になります。

■具体例

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

しかし、「tel」プロトコルが指定されたリンクをPCで開こうとすると当たり前ですが開けません。

そうなると、例えばレスポンシブ対応のサイトを制作する場合、HTMLの構造は基本的にPC、スマホともに同じなので「tel」プロトコルを使用するとなるとPCにも反映されてしまいます。
困りますね。

ということで、この記事ではPCでアクセスされた時のみ「tel」プロトコルが指定されたaタグを削除する方法を紹介したいと思います。
jqueryです。

PCのみ「tel」プロトコルが指定されたaタグを削除する方法

HTMLの「tel」プロトコルの指定

HTMLの方に若干細工を施します。「tel」プロトコルのaタグにクラス名を付けるのと、spanタグを入れ子にしてください。
こんな感じ。

<a class="telhref" href="tel:00123456789"><span>電話はこちら</span></a>

PCのみ「tel」プロトコルが指定されたaタグを削除するコード

HTMLに細工できたら下記のjsを読み込んでください。

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

これでPCでアクセスした時にはtelのリンクが反応しなくなります。

まとめ

これは結構使用頻度高いと思うので覚えておくのが吉です。

ただ気がかりなのが、本当に「span」タグが必要なのかということ。
「unwrap()」は指定した要素の親のHTMLタグを削除するものです。なので「span」タグを入れ子にする必要があるのですが、
そもそも、aタグを葬り去るには「unwrap()」を使用するしかないのでしょうか?
他にも方法がありそうな気がします。

わざわざ「span」タグ付けなくてもできる方法があれば是非おしえてください。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • to-risugari

    こんにちは。探していた情報ぴったりで、大変参考になりました。m(_ _)m
    ありがとうございました。

    > ただ気がかりなのが、本当に「span」タグが必要なのかということ。

    私も気になりました。spanを削除するなら、

    【HTML】
    電話はこちら

    【js】
    $(‘.telhref’).contents().unwrap();

    とするのはどうでしょうか??

    • kotoriblog

      to-risugariさん
      こんばんは。

      4か月前にコメントをいただいていたのですね。
      全く気付かずスルーしてしまっておりました。
      わざわざ教えていただいたのにお礼ができず申し訳ありません><

      この記事をアップして大分経ちますが、スマホ普及率に伴いこの記事の内容のことは頻繁に使いますね。

      ただ私の記事よりfishpieさんがコメントしていただいてるものを利用したほうがスマートです。

  • fishpie

    いつも参考にさせていただいています。
    私も包んだり解いたりするのはどうも気が引ける口です。で、telリンクを直接セレクタにすれば、クラスを付与しなくても良いですし、リンクを無効にすれば充分だと思います。


    var ua = navigator.userAgent;
    if( ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
    $('a[href^="tel:"]').css( 'cursor', 'default' ).click(function(event){
    event.preventDefault();
    });
    }

    • kotoriblog

      fishpieさん
      こんばんは。
      コメントありがとうございます。

      なるほど。参考になります。
      私はプログラマーではないので、よくこういう問題で躓くのです笑
      ゴールは見えているのですが方法が分からないみたいな。

      教えていただきありがとうございますーー!!