to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

一部のAndroidで、特定のフォーム要素をdisabledにすると、以降すべてdisabledに見える

 

こんにちは。x-fitチーム・エバンジェリストの渡辺です。Android4.1のいくつかの端末で、特定のフォーム要素にdisabledを指定すると、それ以降のコンテンツ全体がdisabledとなってしまう現象が発生しますのでご紹介します。

 

確認された現象

HTML上のコンテンツにフォームを配置します。チェックボックスか、ラジオボタンのいずれかにdisabledを設定します。通常、disabled属性を指定された要素だけが操作不可となるはずですが、disabled指定された要素以降すべての要素がdisabledになったように見えてしまいます。実際は見えているだけで、disabled指定された要素以外のフォーム要素などは使うことができます。

ソースコード例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>disabled test</title>
</head>
<body>
<form action="#">
<label for="normalchk">通常のチェックボックス<input type="checkbox" name="normal" id="normalchk"/></label><br/>
フォーム内部のテキスト
<label for="disabledchk">disabledチェックボックス<input type="checkbox" name="disable" id="disabledchk" disabled="disabled"/></label><br/>

<label for="normaltxt">通常のテキストボックス<input type="text" name="normaltxt" id="normaltxt"/></label><br/>
フォーム内部のテキスト

</form>
<br/>
<br/>
フォーム外のテキスト
</body>
</html>

正常な表示例 異常な表示例

正常な表示と、異常な表示例。異常な表示では、disabledのチェックボックスより後ろがすべてdisabledのように見えるが、テキストボックスに入力はできる。

 

確認されているのは、弊社にある端末のうち以下の7機種です。
 
ELUGA X(P-02E)[Android 4.1]
GALAXY NEXUS(SC-04D)[Android 4.1]
AQUOS PHONE EX(SH-04E)[Android 4.1]
Xperia Z(SO-02E)[Android 4.1]
ARROWS A(201F)[Android 4.1]
HONEY BEE(201K)[Android 4.1]
MEDIAS X(N-04E)[Android 4.1]
 
Androidのバージョンは4.1、いずれもAndroidブラウザで発生しています。すべてのAndroid4.1端末で発生するわけではありません。
 

原因と回避策

複数のメーカーの端末で発生していることから、Androidブラウザのバグと思われますが、現象が発生しないメーカーもあるため、独自に手を入れて回避している場合もあるようです。メーカーがOSアップデートを提供している場合には、できうるだけ最新のものにしておくようにしましょう。

コンテンツ作成側での回避策は確認されていません。フォームでdisabledを利用しているサイトは多いと思います。ユーザから情報を収集する重要なページであることも少なくないでしょう。サイトを運営されている方で、disabled属性を使っている場合は、是非実機での確認をお勧めします。

 

※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 
タグ: 
このエントリーをはてなブックマークに追加