HTMLでは、電話番号をタップしたら、その電話番号に発信するリンクを設定することができます。
使うのは通常のリンクと同じaタグで、リンク先を指定するhrefに「tel:電話番号」という風に書きます。
<a href=”tel:000-1111-2222″>000-1111-2222</a>
電話番号のハイフンはあってもなくても機能します。
PC表示時には電話リンクを無効にする方法
スマホやタブレットのユーザーが電話番号をタップすると電話を発信できるのはとても便利ですが、PCではこのtelリンクを無効化したいというケースもあると思います。
CSSでの書き方
CSSで電話発信の無効をする場合は次のように書けばOKです。
a[href^=”tel:”] {
pointer-events: none;
}
pointer-events: none;
}
ただし、ブラウザサポートがIE11からということで、IE11未満では使うことができません。その場合はjQueryを利用することで対応することができます。
jQueryでの書き方
jQueryで電話発信の無効をする場合は次のように書けばOKです。
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();
});
}
var isMobile = /iphone/.test(ua)||android(.+)?mobile/.test(ua);
if (!isMobile) {
$(‘a[href^=”tel:”]’).on(‘click’, function(e)) {
e.preventDefault();
});
}
userAgentを使って、スマホではない場合にtelリンクの機能を無効にしています。
Leave a Comment