IEでinputタグにキャレットが当たってしまう件

最近テストチームから上がってきた問題で、表示項目にカーソルを合わせるとIEとfirefoxでだけカーソルが表示されてしまうという報告を受けました。

ん、よくわからないな。

詳しく見てみると、
1.ラベルタグの中のinputタグ(type=form)にタブ移動するとキャレットが見える問題
2.inputタグ(type=text)をクリックするとキャレットが見える問題
の2つの問題がある事が発覚。

つまりファイルを選択して取り込み、取り込んだファイル名を表示している。という2か所でキャレットが当たってしまうという問題。

またIEの問題かよ、、、と色々調べてみて。

解決方法もいくつか出てきたので実装してみると、大体JSでフォーカスが当たった瞬間外すみたいな奴。

まぁいいんだろうけど、なんか不自然な動きするし、これじゃファイル名をマウスで選択することが出来ない。。。

僕が実装した解決は(このケースではということになるのだけれども)
1.ラベルの中のinputタグをdisplay:noneにしてそもそもカーソルが当たらないようにする
2.これはファイル名を表示する項目でreadonlyだったのですがdisableに変更
disableだと背景色と文字色が変わるので修正。あと、ファイル名の上にカーソルがあった時ようにcursor=textを設定。

あれ、思ったよりも完璧に解決出来た(かも)。

フロントコーダーじゃないので正しいかどうかはわからないけど。。。

コメント