Webサービス開発、あるよ
Webサービス開発、あるよ
2013.07.16

ファッ!? iPadでlabel要素がタップできない! そんな時の対処法

小林

いいですよね。テレサ・テン。

こんばんは。小林です。

さて、突然ですが、みなさん。フォーム作ってますか?

このブログを見てくださってるということは、今まで作ったフォームの数を覚えていないくらい作ったことがおありかと思います。

そうでない皆様にご説明致しますと、お問い合わせ的なあれです。

そう、インターネッツでよく見かけるあれです。

ガンプラ作りながらネットサーフィンしてるとよく見かけると思うんです。

こんな感じのやつです。

ラジオボタンの例

どれか一つ選びましょうってやつですね。

で、これ、選択する際は文字の部分を押下しますよね?

押しやすいですもんね。

ところが、

iPad、というかiOSのバージョン5(恐らくバージョン5以前)だと、文字の部分をタップしても選択できないのです。

丸い部分をタップすればいいんですが、あんな小さい丸なんてタップできませんよね。

困りました…。

半ば諦めかけて、「ひたすらピンポン」で遊んでいたところ、

デザイナーの誠人が教えてくれました。

「山は高きを厭わず海は深きを厭わず」

なるほど、labelにonclick属性を指定してやればいいんですね!

中身は空で大丈夫でした。

以下が、参考までにHTMLです。

<label for="RadioA" onclick=""><input type="radio" id="RadioA" name="radio"> つぐない</label>
	<label for="RadioB" onclick=""><input type="radio" id="RadioB" name="radio"> 愛人</label>
	<label for="RadioC" onclick=""><input type="radio" id="RadioC" name="radio"> 時の流れに身をまかせ</label>

こんなjavascriptでもいいかも知れませんね。

(function(){
	Array.prototype.forEach.call(
		document.body.querySelectorAll('label'),
		function(l){
			l.onclick = l.onclick || function(){}
		}
	);
}());

これで文字をタップしても選択できるようになりました。

ありがとう、誠人。

世界中の全ての子供達に愛と平和が訪れますように…。

U Y A
K A