【HTML】a要素（aタグ）で電話発信用リンクを設定する方法
2018/05/18
a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。
スマホのワンタップで電話発信させる方法
設定するのは非常に簡単。
aタグに電話番号を設定するだけです。
|
1 |
<a href="tel:0660123456">お電話はこちら！ 06-6012-3456</a> |
これでOK。
スマーフォフォン以外ではワンタップ発信を無効にする
レスポンシブWebデザインでは、思いがけない挙動をするやも知れません。
なので、スマーフォフォン端末以外では、「tel:」を無効にしたい場合もあると思います。
そんな場合は、以下のJavascript（jQuery使用）で、クリックイベントを無効化するといった事で回避できます。
|
1 2 3 4 5 6 7 8 |
var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').on('click', function(e) { e.preventDefault(); }); } |
e.preventDefault(); は、以前の『「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた』でも活躍した、hrefを無効にする呪文です。
