Logo address

Javascript: Tab input (4)

2010/03/26

はじめに

僕が普段文房具代わりに使うコンピュータ環境は Mac/OSX である。そして、これまではブラウザとして Camino を愛用して来たが、最近は Google の Chrome に切り替えた。体感的には Camino より速く、使いやすいのだ。少し前は、問題が多くて使えなかったが、最近のは(まだ変な所が残っているが)使い物になる。

Chrome に切り替えて困った事が発生した。僕はブラウザを使ってサーバのテキストファイルを直接編集している。例えば、このホームページもそのようにして作られている。編集するテキストファイルがプログラムの場合にはテキストエリア(textarea)に TAB の入力が必要になる事がある。しかしこれがくせ者である。そのようなページを作るのが難しいのである。

今回ネットを調べてみると実に良く出来たサイトがあった。2つを紹介する。
一つは http://pallieter.org/Projects/insertTab/ であり、実に簡単な Javascript で TAB 入力を可能にしている。しかも
should work in all browsers
と書いている。僕が 2 年前に悪戦苦闘したのは一体何んだ!?

もう一つは http://teddevito.com/demos/textarea.html で、これは TAB キーと SHIFT+TAB キーでブロックインデントとディデントをも可能にするという気の利いたアイデアを披露している。ブラウザとしては
Chrome 1.0, FF 3.0, IE 6&7, Safari 3.2, Opera 9.6
に対応しているという。

今回はシンプルな方 pallieter.org を試す事にした。

目標

Textarea にタブキーを入力できるようにすること。以下に2つの textarea を作って、その中で TAB を入力できるようにしてみた。


使われた Javascript は pallieter.org から借用した。ページのソースを見れば、この Javascript のコードが見える。また textarea の書き方も分かる。

動作確認

OSX(10.6.2)

動作確認の結果は(最新の版にアップして確認した)

Chrome(5.0), Safari(4.0.5), Firefox(3.6.2), Camino(2.0.2) は OK
Opera(10.10) は NG
注意: Firefox, Camino は古い版では NG

Linux/Xubuntu

Chrome(5.0.342), Firefox(3.5.7) は OK
Opera(9.80) は NG

Win

Win 系では
XP: IE(6.0.2900), Firefox(3.5.8), Safari(4.0.3) が OK
Opera(?) は NG

Chrome(4.1.249) の動作がおかしい。ソースを全部読み取らない事があり、例えばこのページも表示されない!
Opera のバージョンの表示方法が分からない!

おわりに

僕が textarea への TAB 入力をいろいろトライしたのは 2007 年であるから、あれから 2 年以上経過した事になる。当時のブラウザでは苦労が多かったが、現在のブラウザでは今回の簡単な Javascript で動かないのは Opera だけである。この間、ブラウザ相互の事実上の標準化が進んだのであろう。