一昔前にIE6問題なんてものがあった。
IE6は非常にバグが多く独自の仕様が満載でIE6のためだけに特別なコードを書かなければいけないなんてことが日常茶飯事だった。
IE6が圧倒的なシェアを持っていたころは問題なかったのだが、IE7やIE8の登場やFirefoxの台頭によりIE6のシェアは減り続け、WebデザイナーやWebプログラマーはIE6対応に頭を抱えることになる。
やっとこさIE6が消えて対応しなくてもよくなり問題はなくなったかに見えたのだが、新しい問題が出てきた。それがIE8 + HTML5問題だ。
HTML5というのはいろいろと端折って簡単に言うとHTMLの新バージョンである。いろいろと便利ですごい機能が付いたおかげで、今まで面倒なコードを書いて実装していた機能を簡単に実装できるようになるすごいやつだ。
HTML5を使ったサイトでHTML5の機能を使うにはブラウザ側がHTML5に対応する必要がある。そこで問題になったのがIE8だ。
現在のブラウザシェアはIE10が3割、Chromeが2割、そしてIE8がそれに続いて1割ほどだ。これだけ見ればIE8対応を切り捨てると言う選択肢が出てくるのだが、この割合は全体での話。ターゲットユーザー層によってはIE8対応を切り捨てられなくなる。例えば社内向けシステムなどがそうだろう。
HTML5の機能でおそらくもっともお世話になるのがplaceholderだ。こんな入力フォームを見たことは無いだろうか。

入力すべき情報のヒントが灰色で表示されている。HTML5が無ければ面倒なコードを書く羽目になったのだが、HTML5であれはplaceholder="半角英数"と書けばいい。
HTML5に対応していないブラウザに対応するためのライブラリを使用すれば同じようにplaceholder="半角英数"と書いてライブラリを読み込むだけでいい。だがここに落とし穴がある。
IE8でplaceholder="半角英数"をライブラリで実装し、入力した情報をjqueryでvalue値を取得しajaxで送信すると、placeholderに入力した文字列がそのまま送信される。
ライブラリ側がplaceholderの実装のためにvalue値に値を入れているため発生するようで、これにより意図しないデータが送信されてしまう。
これを防ぐにはデータを送信する前に、送信するデータがplaceholderの値と同じだった場合はそのデータを空にすることで対処できる。ユーザーがplaceholderと同じ値を入力したらアウトだが、placeholderにそんな値を入れることはユーザビリティがよろしくない。
Posted at 2013/09/12 15:10:56 | |
トラックバック(0) |
技術メモ | パソコン/インターネット