カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

iOSでのフォームラベル

iOSではHTMLタグ<label>が認識されないようです。

フォームのラベルはユーザーにとって当たり前というほど役に立ちます。
ですが、PCやAndroidではラベルのクリックイベントが認識されるのに、iOSでは認識されません。

そこで、ラベル付けに一工夫することで解決することができます。

例えば、チェックボックスを例にしてやってみましょう。

<label onclick=""><input type="checkbox" name="test" value="1">チェック1</label>

または

<input type="checkbox" id="t2" value="2">
<label for="t2" onclick="">チェック2</label>

空のクリックイベントを入れているところがミソです。

そして<head>内に、以下のJavaScriptを記述します。

document.getElementByTagName("label").click(function(){});

これでiOSでもラベルのクリックイベントが認識されるようになります。

参考URL:
http://blog.bluearrowslab.com/smartphone/topicks/55/

1,479 views

HTMLドキュメント互換モード IE8

Internet Explorer 8の互換モードについて。

IE7と同様の動作を行うようにするにはヘッダーに以下を記述します。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

同様に「IE5」「IE=8」と指定することで、他の互換モードを選択できます。
また、「IE=edge」と指定すれば、IE8に対して利用できる最も互換性の高いモードを使用するよう指示できます

X-UA-Compatibleヘッダーでは、大文字小文字が区別されません。
ただし、他のすべての要素よりも先に(TITLE要素と他のMETA要素は除く)、
Webページのヘッダー(HEADセクション)内に記述される必要があります。

8,605 views

履歴を残さずリンクさせる

ブラウザに履歴を残さずにリンクするには

<a href="javascript:window.location.replace('../index.html');">トップページへ</a>
1,379 views

フォームの入力モード制御

HTML入力フォームの入力モードを制御します。(IE5以上のみ)

設定値は以下の通りです。

auto 自動
active 入力モードON
inactive 入力モードOFF
disabled 使用不可

HTMLで直接指定する場合

<input type="text" name="item" value="" style="ime-mode: auto;">

続きを読む…»

2,472 views

右クリック禁止

bodyタグに「 onContextmenu=”return false”」を追加すると、
右クリックのコンテキストメニューが表示されなくなります。

<body onContextmenu="return false">

2,334 views