Opera で TAB キーによるフォーカスの移動を抑制する
TEXTAREA に文字列置換機能を追加するの記事で参考にさせていただいた Enjoy×Study さんで、 Opera でTABキーの入力をキャンセルする方法という記事を見つけました。 Opera では、キーイベントをすべてキャンセルしても、 TAB キーによるフォーカスの移動だけは禁止できないそうです。試してみると、確かに私の TEXTAREA_Replace.user.js でもフォーカスが移動してしまいました（´Д｀；。これはちょっと気持ち悪いですね。
なにかいい方法はないかと思っていたのですが、あるとき、 Google Personalized Homepage のガジェット内にある TEXTAREA では TAB キーを押してもフォーカスが移動しないことに気付きました（ガジェット内にフォーカスを受けるコントロールがひとつしかない場合）。ということは、 TEXTAREA を IFRAME 内に閉じ込めれば、この問題が解決できるのでは！？
ということで、さっそく試してみました。
バッチリです！ヽ（゜▽゜）ノ
やっていることはごく単純。まず JavaScript で TAB キーを無効にした TEXTAREA を全画面表示するだけの "iframe.html" を用意します（読み易さを向上させるため、 IE や旧ブラウザ対応のコードは削除してあります）。対象が Opera だけなら TAB キーを無効にする必要はありませんが、それだと Firefox や IE でフォーカス移動ができてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: 0px; padding: 0px; overflow: hidden; } textarea { width: 100%; height: 100%; margin: 0px; padding: 0px; border: none; } </style> <script type="text/javascript"> function onkey(event) { if(event.keyCode == 9) { event.returnValue = false; event.preventDefault(); } } window.onload = function() { var e = document.getElementsByTagName('TEXTAREA'); e[0].onkeydown = onkey; e[0].onkeyup = onkey; e[0].onkeypress = onkey; } </script> </head> <body> <textarea></textarea> </body> </html>
あとは、本来の HTML ファイルで TEXTAREA の変わりに IFRAME を使い、 "iframe.html" を読み込むだけです。
<iframe src="iframe.html"></iframe>
"iframe.html" を本来の HTML ファイルと同じドメインに置いておけば、 JavaScript によるテキストの取得・設定などは自由に行えるはずです。さすがにフォームの中に入れることはできませんが、フォーム内のテキストボックスで TAB キーを抑制する理由はあまり思いつかないので、問題になることは少ないと思います。
技術的には "iframe.html" を用意する代わりに JavaScript で IFRAME とその内容を動的生成することも可能です。ただ、私が試した限り Firefox のメニューバーにある通信中のアイコンがアニメーションしっぱなしになってしまいました。 Opera はとくに問題ないみたいです。たぶんセキュリティー対策（裏でこっそりリクエストを投げることができないように）なのでしょうが、別に通信をしているわけではないので勘弁してほしいところです（笑）。どなたか、良い方法をご存じないでしょうか。
詳しくはこちらの記事をどうぞ！
この記事にコメントする