Help us understand the problem. What is going on with this article?

スマホで閲覧時のみ、電話番号にtel:リンクを追加する

More than 3 years have passed since last update.

やりたいこと

  • スマホで見たときに、タップするだけで電話がかけられるように電話番号にリンクをはりたい。
  • でもPCで見たときはリンクさせたくない。
  • それを同じHTMLで済ませたい。
  • テキストだけでなく、画像でも同様にしたい。

ということで、JavaScript(jQuery)を使います。
デモ

jQueryで電話番号リンクを追加する

HTML
<!-- テキストの場合 -->
<p class="tel">00-1234-5678</p>

<!-- 画像の場合は、alt属性に電話番号を入れておきます。 -->
<p class="tel">
<img src="https://placehold.jp/150x150.png" alt="01-1234-5678">
</p>
JS
$(function() {
  $('.tel').each(function() {
//.tel内のHTMLを取得
    var str = $(this).html();
//子要素がimgだった場合、alt属性を取得して電話番号リンクを追加
    if ($(this).children().is('img')) {
      $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
    } else {
//それ以外はテキストを取得して電話番号リンクを追加
      $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
    }
  });
});

そうすると、動的にtelリンクが追加され、HTMLは以下のようになります。

HTML
<!-- テキストの場合 -->
<p class="tel">
<a href="tel:0012345678">00-1234-5678</a>
</p>

<!-- 画像の場合 -->
<p class="tel">
<a href="tel:0112345678">
<img src="https://placehold.jp/150x150.png" alt="01-1234-5678">
</a>
</p>

スマホのみ適用させる

上記コードをスマホ閲覧時のみ適用させるようにします。
以前書いた記事をそのまま使用。
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする

JS
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

}

まとめ

HTML
<p class="tel">00-1234-5678</p>

<p class="tel">
<img src="https://placehold.jp/150x150.png" alt="01-1234-5678">
</p>
JS
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function() {
    $('.tel').each(function() {
      var str = $(this).html();
      if ($(this).children().is('img')) {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
      } else {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
      }
    });
  });
}
bass-inu
非IT企業のWeb担当者でした。無職(^o^)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした