テキスト入力欄の長さを変更可能に

掲示板やメッセージ送信フォームなどでは、投稿欄(入力欄)が狭いと長い文章が書きにくくなってしまいます。 かといって、広大なスペースを最初から取っておくとページ全体を見渡しにくくなってしまいます。 そこで、投稿者が必要に応じて編集領域を広げられるようなテキスト入力欄を作ってみましょう。

コメント:

上記の入力欄の下部にある「広げる」ボタンや「狭める」ボタンをクリックしてみて下さい。 クリックするたびに、2行分ずつ入力欄(編集領域)が増減します。

なお、accesskey属性を使ってアクセスキーを指定してありますので、以下のショートカットキーでもボタンを押せます。(キーの方がマウスよりも連続で押しやすいです。)

●Windowsの場合は(※)
・([Shift]+) [Alt]+[X]キーで「広げる」、
・([Shift]+) [Alt]+[C]キーで「狭める」ボタンを押せます。

●MacOSの場合は
・[Ctrl]+[X]キーで「広げる」、
・[Ctrl]+[C]キーで「狭める」ボタンを押せます。

●(WindowsでもMacでも)Operaの場合は
・[Shift]+[ESC]+[X]キーで「広げる」、
・[Shift]+[ESC]+[C]キーで「狭める」ボタンを押せます。

※Windows版Firefoxの場合は、[Shift]キーが必要です。(IEやWindows版Safariでは、[Shift]キーはあってもなくても構いません。)
※アクセスキーには、ブラウザ自身に搭載されたショートカットキーとバッティングしないキーを設定する方が無難です。 ここでXとCを使ったのはそのためです。(Xは「eXpand」の意味から、Cはその隣だから。) ブラウザによっては、XやCも標準で使われているかもしれません。

今回は、上記のサンプルのように、テキスト入力欄に編集領域の増減機能を加える方法をご紹介いたします。 HTMLで作るボタンに対して、短いJavaScriptを加えるだけの簡単な記述で実現できます。