すごい細かいIEの仕様について、今回は書きたいと思っています。
もしかしたら、Webアプリ開発している人なら知っていることなのかもしれませんが。。。
見つけた環境は、Windows XP SP3のIE 6です。
ただ、Windows 7 + IE8,9とWindows 7 SP1 + IE 9でも、再現したのでここに残しておこうかな。
window.openなどで開いた画面では、テキストボックスがReadOnly属性がついていても、その中の文字列は選択できます。
例えば、文字列の上でダブルクリックで選択できます。
下の図は、window.openで開いた画面です。
次は、showModalDialogで開いた画面です。
テキストボックスの上でダブルクリックしても、選択できません。
まぁー、選択できないので、ただ画面が表示されているだけに見えますよね。
やり方はいくつかあると思いますが、showModalDialogを使うということと、テキストボックスの編集はできないということを今回は守ることにしました。
そうした場合、自分は二つの方法で試してみました。
1つ目は、テキストボックスからReadOnly属性を外して、onKeyDownイベントを無効化する作戦です。
全部のテキストボックスを、下記のようにします。
＜input type="text" name="test1" value="12345" size=10 onkeydown='return false;'＞
カーソルはあたりますけど、編集はできないです。
コピペでも、ソフトウェアキーボードでも一応編集はできませんでした。
でも、編集できないのに、カーソルが当たるのはちょっと気持ち悪い気持ちもします。
次に試したのは、テキストボックスのReadOnly属性をとっておいて、bodyのonloadイベントで設定する方法です。
こんな感じです。
＜body onload='document.form1.test1.readOnly=true;'＞
＜form name="form1"＞
＜input type="text" name="test1" value="12345" size=10 onkeydown='return false;'＞＜br＞
＜input type="text" name="test2" value="12345" size=10 readonly＞＜br＞
＜input type="text" name="test3" value="12345" size=10 readonly＞＜br＞
＜/form＞
loadした直後は、test1にカーソルが当たっています。
かつ、キー入力ができてしまいますので、keydownの無効化をしました。
で、一度test2もしくはtest3を選ぶと、test1はちゃんとreadonlyになります。
load直後に、test1にカーソルが当たるのが我慢できれば、あとはいいんですけどね。。。
むしろ最初の1発だけ、カーソルが当たるのが気持ち悪いという気もします。
ひとまず、選択できた画面。
最後に、
IE6の場合、readonlyのところには基本的にはフォーカスがあたっててもカーソルは表示されませんでしたが、Win 7のIE 8以降では、カーソルがあたるようです。
それと、IE10では、この現象は再現しませんでした。
不慣れなjavascriptなので、誤りがありましたらすみませんね。