PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

【shutto小技】電話番号に自動でtelリンクを付けるJavaScript

2013年7月5日 | 森下 奈緒

シェアする

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

iPhoneのSafariでは、電話番号を自動でリンクにしてくれますが、
自動リンクしないAndroidブラウザ対応で、電話番号にひとつひとつに
tel付きの電話番号のリンクを付けるのが大変……という時に
役立つJavaScriptをご紹介いたします。

下記、JSを「変換完了時に実行されるコード」に記入していただき、
電話番号を自動リンクさせたい要素の編集メニュー「HTML属性 > class」に
「tel」と記入してください。

[html]
//電話番号自動リンク
(function($) {
$(‘.tel’).each(function(i, el) {
if (!$(el).find(‘a’).length) {
el.innerHTML = el.innerHTML.replace(/d+-d+-d+/g, function(match) {
return ‘<a href="tel:’ + match.replace(/-/g, ”) + ‘">’ + match + ‘</a>’;
});
}
});
})(Zepto);
[/html]

JSを追加していただくと、下記のように電話番号がtel付きのリンクになります。

[html]
//JS追加前
<div>03-1234-5678</div>
//JS追加後
<div class="tel"><a href="tel:0312345678">03-1234-5678</a></div>
[/html]

※変換元のPCページのhtml構造により、動作しない場合がございます。

これからもshuttoを宜しくお願いいたします!

shutto小技 バックナンバー

【shutto小技】一括で画像のalt属性をテキストに置換えるJavaScript
http://blog.shutto.com/?p=1693
【shutto小技】複数の設定で共通のCSSを使用する方法
http://blog.shutto.com/?p=1674
【shutto小技】アコーディオンタップ時の背景色の指定方法
http://blog.shutto.com/?p=1631

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1−9−4 蚕糸会館4階