カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

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/

0
742 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セクション)内に記述される必要があります。

0
6,934 views

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

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

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

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

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

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

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

HTMLで直接指定する場合

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

続きを読む…»

0
1,729 views

右クリック禁止

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

<body onContextmenu="return false">

0
1,982 views

HTML雛形

【XHTML 1.0】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<title>(タイトル)</title>

<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" / >

<script type="text/javascript" src="./js/common.js" charset="shift_jis"></script>
</head>
<body>

【検索エンジンに登録されたくない】

<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="noindex,nofollow" />

【Yahoo!のカテゴリ登録の説明よりもソースのdescriptionを優先する】

<meta name="robots" content="noydir" />
0
1,036 views

気をつけよう 文字コード

例えば、外部JavaScriptファイルを読み込む場合

<script type="text/javascript" src="..."></script>

と読み込むが、サイト内に複数の文字コードが混在している場合は注意が必要である。
MySQL等ではEUCを使用しているが、Ajaxを使いたいので該当ページのみUTFにしているとき
柔軟なブラウザならある程度ファジーに解釈してくれるが、そうでないものもある。

そこで、厳密に文字コードを指定してあげよう。

<script charset="..." type="text/javascript" src="..."></script>

こうしてやると、問題が解決する可能性が極めて高い。

0
983 views

docomoで「無効なデータを受信しました。(302)」とエラーが出る

ホームページを携帯キャリアで振り分けるとき、docomoでは相対パス指定でリダイレクトするとエラーが発生します。

例えばPHPで

header("Location: ./redirect.html");

とするとエラーになります。

対処方法は絶対パスでリダイレクトする

header("Location: http://www.example.jp/redirect.html");
0
12,290 views

HTMLフォームでオートコンプリートを無効にする

フォーム全体のオートコンプリートを無効にする

<form action="example.php" name="form1" autocomplete="off" />

部品ごとにオートコンプリートを無効にする

<input type="text" name="name" value="" autocomplete="off" />
0
1,097 views

ALT内で文字列を改行させる

HTMLの画像表示で、画像のALT属性(代替テキスト)に改行を含めたい場合、
「&#13;」を使用します。

<img src="sample.jpg" alt="1行目&#13;2行目">

1行目
2行目

0
1,058 views