ほぼ開発が完了しているシステムですが、アンケート登録機能があります。
各質問で、回答のタイプ・選択値(選択する回答のタイプの場合)・必須かどうかを登録できます。
開発完了と思っていたのですが、担当者の方からバグ報告がありました。
回答のタイプで「チェック」を選択すると、変な所にプルダウンメニューが表示されるとの事。
バグ
さっそく再現しようとしましたが、IE7・Firefox 共に何どやっても再現しません。
どんなバグかも確認しようがないので、スクリーンショットを取ってメールしてもらいました。
スクリーンショットを確認すると、たしかにテキストボックスの上に、プルダウンメニューが重なって表示されています。
スクリーンショットを見てもしやと思い、Windows 2000 + IE6 でテストしてみると、やっと再現する事が出来ました。
担当者の環境を確認すると、 Windows XP + IE6 との事でしたので、IE6 固有の問題と特定する事が出来ました。
まだ IE6 での検証が必要なんですね…
とにかく、プロとしては対応しなければなりません。
まず、この問題以外の動作自体は大丈夫か確認しました。
JavaScript 自体は IE6 でも正常に動いているようです。
つぎは回避方法を模索しました。めずらしい現象なので、ネットを検索しても情報は見当たりません。
何度も試行錯誤して対応しました。
さらに IE6 で動作検証を行った所、ラジオボタンなどで使用しているlabelタグが機能していないことが判明しました。
この対応もかなりの時間がかかりましたが、なんとか対応しました。
基本的には自分のメモですが、誰かの役に立つかも知れませんので公開します。
selectタグに optionタグを追加すると、親要素(tr)に style=”display: none;” と指定されているにも関わらず select要素が表示されてしまう
今回のシステムでは、回答のタイプ別に初期値を登録する行を準備しており、回答のタイプにより表示・非表示を行うようにしています。
回答タイプがプルダウンリストまたはラジオボタンの場合は初期値をプルダウンリストで選択可能にしています。
回答タイプがプルダウンリストの時に選択値を追加した場合、初期値選択用のプルダウンリストに optionタグを追加して作業を継続できるようにしています。
このとき、回答タイプがラジオボタンの場合の初期値選択用のプルダウンリストにも optionタグを追加する必要があります。
この動作を行った時にこの不具合が発生します。
以下の方法回避できました。
(1) 親要素(tr).style.display を保存
(2) 親要素(tr).style.display に ” を設定(表示させる)
(3) optionを追加
(4) 親要素(tr).style.display に(1)で保存した値を設定
(1),(2),(4) の処理を追加する必要がありました。
IE6 では labelタグは <input id=”id” … /><label for=”id”>テキスト</label> の形式にする
IE6 では以下の形式のみサポートしています。
<input id="id" ... /><label for="id">テキスト</label>
IE7, Firefox では上記形式に加え、以下の形式もサポートしています。
<label><input ... />テキスト</label>
じつはPHPでの表示部分の修正は大したことではないのですが、JavaScriptの修正が大変でした。
今回のアンケート登録機能には回答タイプに「チェック」があり、複数回答可能とする仕様です。
当然初期値の設定も複数可能とする必要があります。
フォームが送信された時に、どの選択値が初期値としてチェックされているかわかるようにするには、チェックボックス別に初期値の順番を含んだ名前を付ける必要があります。
前述したように初期値の設定部分は選択値の追加・移動・削除に連動しています。
このため、選択値が変更された場合には、チェックボックスの name属性と id属性、labelタグの for属性を変更する必要がありました。
JavaScript で labelタグの for属性にアクセスするには htmlFor とする
labelタグ.for としてアクセスしようとしても、for は JScript のキーワードなので構文エラーとなります。
Firefox では labelタグ.getAttribute( ‘for’ ) や labelタグ.setAttribute( ‘for’, 値 ) で対処できるのですが、IE6・IE7 では対処できません。
ネットを調べても labelタグの for属性の情報なんて、なかなか引っ掛かりません。
なので、奥の手をつかいました。labelタグのキーを全て表示させます。
JavaScript の該当部分に以下の行を追加しました。
for ( var key in labaelタグ ) alert( key ) ;
ひたすらエンターを押しながら確認しました。
どうやら htmlFor という見慣れない属性がある様です。
さっきの行を修正して再度確認します。
alert( labelタグ.htmlFor ) ;
やっと labelタグの for属性にアクセスできました。
IE6対応は、本当に無駄な時間がかかってしょうがないのです。