お疲れ様です。ナカムラです。
この間テレビでやってたシン・ゴジラが面白かったのでアイキャッチも何となく、それっぽく。
Webサイト作成の際に
「情報として電話番号は載せたいけれど、パソコンで電話番号のリンクは不要。
でも、スマホのときはさくっと電話をかけられると便利だね！」
という事が、往々にして起こりますよね。
旧ナカムラはいちいちコーディングの時にスマホ用の電話番号のリンクを付けた電話番号と、パソコン用のリンクの無い電話番号を書いてました。
しかしながらJQueryでスパっと切り替えられる方法を発見したので備忘録がてら残します。
見つけたのはWebデザイナーの宝箱、Qiita様でございます。
いつもありがとうございますハハァ
まずはHTMLコード
<p class=”tel”>01-2345-6789</p>
画像の場合はaltに電話番号を・・・
<p class=”tel”><img src=”hogehoge.png” alt=”01-2345-6789″>
</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>’));
}
});
});
}
べんりな方法でしたm(__)m
