jQuery – 電話番号のリンクをスマホで有効、PCで無効にする。

公開済み: 2016年5月31日
更新: 2016年7月8日
作成者: MizuKazu
カテゴリー: HTML5&CSS3, ｊQuery
タグ: HTML, jQuery

jQuery – 電話番号にリンクをスマホで有効、PCで無効にする。

レスポンシブサイト制作で電話番号を<a href=”tel:000-000-0000″>で掲載するとき、スマホからのアクセス時はタップで電話が出来るので良いのだが、PCでクリックしてしまうとプロトコル云々・外部プロトコル云々となどと表示されて困る。

スマホからアクセス時はタップで電話が出来て、PCではリンクを無効にしてくれる、そんな便利なものはないかと探してみたらありましたのでメモメモ。

jQuery 読み込んで script 記述するだけで CSS とかいらない。

テレリン対策はこれでok。

デモサイト

HTML

<a href="tel:000000000">TEL:000-000-0000</a>

1	<a href="tel:000000000">TEL:000-000-0000</a>

SCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0) {
		$('a[href^="tel:"]').css('cursor', 'default').click(function (event) {
			event.preventDefault();
		});
	}
</script>

var ua = navigator.userAgent;

if (ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0) {

$('a[href^="tel:"]').css('cursor', 'default').click(function (event) {

event.preventDefault();

});

}

</script>

参考にさせて頂きましたサイトはこちら。

KoToRi Blogさん（http://kotori-blog.com/js/tel_delete/）

この投稿へのコメント

コメントはありません。

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

jQuery – 電話番号のリンクをスマホで有効、PCで無効にする。

jQuery – 電話番号にリンクをスマホで有効、PCで無効にする。

関連記事

jQuery Ajax – HTMLのボックスエリアに別ページの内容をAjax(非同期通信)で表示する。

この投稿へのコメント

コメントを残す コメントをキャンセル

この投稿へのトラックバック

コメントを残すコメントをキャンセル