ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

長さを変更できるテキスト入力欄を作る

入力欄が狭すぎると長文が入力しにくくなります。しかし広すぎるとページが見渡しにくくなってしまいます。ユーザが自ら入力欄の大きさを調節できるような「編集領域の増減機能」付き入力欄を作ってみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

コメント:

上記の入力欄の下部にある「広げる」ボタンや「狭める」ボタンをクリックしてみて下さい。 クリックするたびに、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を加えるだけの簡単な記述で実現できます。

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます