にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

カーソルや文字が入っている間だけ、一時的に入力欄を大きく表示する方法 [イベント,入力フォーム,装飾・内容変更]

ウェブ上の入力欄では、テキストエリアの表示行数(高さ)をユーザの操作に合わせて動的に変更すると便利な場合があります。複数行の入力を求めるとき、最初から大きな入力欄を表示していると、入力するつもりのないユーザにとっては邪魔になってしまうでしょうから。そこで、ユーザがテキストエリア内部にカーソルを入れた状態のときや、テキストエリア内部に文字が入力されている間にだけ、一時的に入力欄の行数(高さ)を大きく広げて表示する方法をご紹介。

カーソルや文字が入っている間だけ、一時的に入力欄を大きく表示する方法

ウェブ上の入力欄では、テキストエリアの表示行数(高さ)をユーザの操作に合わせて動的に変更すると便利な場合があります。複数行の入力を求めるとき、最初から大きな入力欄を表示していると、入力するつもりのないユーザにとっては邪魔になってしまうでしょうから。

解決策としては、ユーザがテキストエリア内部にカーソルを入れた状態のときや、テキストエリア内部に文字が入力されている間にだけ、一時的に入力欄の行数(高さ)を大きく広げて表示する方法があります。

カーソルや文字が入っている間だけ、一時的に入力欄を大きく表示する

テキストエリアの表示行数(高さ)を条件に応じて動的に変化させる方法は、JavaScriptを使えば簡単です。

まずは、HTMLで対象のテキストエリアを作成し、何も操作していない標準状態の見え方(装飾)をCSSで作成しておきます。最後にJavaScriptを加えて、ユーザの操作や条件に応じてテキストエリアの装飾が動的に変化するよう作れば完成です。以下に、HTMLソース→CSSソース→JavaScriptソースの順に紹介・解説します。記述量は短いので、わりと簡単です。

大きさ(高さ)を動的に変化させたいテキストエリアを作成する(HTMLソース)

まずは、HTMLでテキストエリアを作りましょう。単にtextarea要素を使うだけです。CSSで装飾したり、後からJavaScriptで装飾(表示行数や背景色など)を動的に変化させるため、id属性を使って一意の名称を付加しています。

※入力フォームを作る際には、たいていform要素を使って全体を囲んでいるでしょうし、送信ボタンなどもあるでしょうから、下記のHTMLソースにはそれらも加えてあります。しかし、特に必須ではありません。

HTMLソース

<form>
	■適当なテキストエリア(入力欄):<br>
	<textarea id="targetbox"></textarea>
	<input type="button" value="送信">
</form>

上記のHTMLソースでは、テキストエリアを作るtextarea要素に対して、targetboxというid名を付加しています。(3行目)
次に、このidに対してCSSで装飾を追加しましょう。

テキストエリアの初期状態を装飾しておく(CSSソース)

テキストエリア(textarea要素)をまったく装飾せずに使うケースはあまりないでしょう。少なくとも横幅(文字数)や高さ(行数)は指定するでしょうし、おそらくページデザインに合わせて枠線や背景なども装飾したいケースが多いのではないでしょうか。

ここでは、ユーザの操作や条件に応じてテキストエリアの高さを変化させることが目的なので「デフォルトの高さ」さえ指定していれば充分なのですが、それだけだと見栄えがあまりよろしくないので、枠線や背景色の指定なども同時に加えています。

CSSソース

#targetbox {
	border: 2px solid #0a0;  /* 枠線 */
	border-radius: 0.67em;   /* 角丸 */
	padding: 0.5em;          /* 内側の余白量 */
	background-color: #fff;  /* 背景色 */
	width: 20em;             /* 横幅 */
	height: 3em;             /* 高さ */
}

上記のCSSソースで重要なのは7行目のheightプロパティだけです。ここで、テキストエリアの標準状態の行数を指定しています。「カーソルが入っておらず、文字も入力されていない状態なら、邪魔にならないようにする」のが目的なので、小さめに指定しておくのが良いでしょう。
それ以外のポイントをざっと解説しておきます。

  • 2行目: まず、テキストエリアに枠線を加えています。太さ2pxで明るい緑色(#0a0)の実線(solid)です。
  • 3行目: 次に、枠線の角を丸くしています。半径0.67文字分(=0.67em)の大きさなので、ちょっとだけ丸くなる程度です。
  • 4行目: 何も装飾しなければ、テキストエリアのすぐ内側に入力文字が表示されます。しかし、ここでは角を丸く装飾しているので、それだと入力文字が見にくくなります。そこで、内側の余白(padding)を少しだけ設けています。
  • 5行目: テキストエリアの背景色です。ここでは白色(#fff)を指定しています。
  • 6行目: 横幅です。ここでは20文字分(=20em)の幅にしています。
  • 7行目: ここが先ほどから解説している今回のメインです。ここでは高さを3文字分(=3em)にしています。

CSSは以上です。
次に、JavaScriptソースを書きましょう。

フォーカスの有無や内容文字列の有無に応じてテキストエリアの高さを変化させるJavaScriptソースを書く

ユーザの操作やテキストエリアの条件に応じてテキストエリアの高さを動的に変化させるスクリプトを作ります。
ここでは、動作と変化を確認しやすいように、テキストエリアの高さだけではなく背景色も動的に変化するよう作ります。
まずは、JavaScriptソースすべてを掲載しておきます。

JavaScriptソース

// ▼①フォーカスを得た場合
function gotfocus() {
	this.style.height = "10em";				// 高さを10文字分にする
	this.style.backgroundColor = "#ffe";	// 背景色を薄い黄色にする
}
// ▼②フォーカスを失った場合
function lostfocus() {
	if( this.value.length == 0 ) {
		// 文字数がゼロなら
		this.style.height = "3em";			// 高さを3文字分にする
	}
	this.style.backgroundColor = "#fff";	// 背景色を白色にする
}

// ③テキストエリアのイベントに、上記関数を割り当てる
document.getElementById("targetbox").onfocus = gotfocus;	// フォーカスを得た場合
document.getElementById("targetbox").onblur = lostfocus;	// フォーカスを失った場合

上記は主に3つの内容に分けられます。

  • ①フォーカスを得た場合に実行される関数「gotfocus」 (2~5行目)
  • ②フォーカスを失った場合に実行される関数「lostfocus」 (7~13行目)
  • ③テキストエリアの各イベントに対して①と②の関数を割り当てる処理 (16・17行目)

まずは、③から説明する方が分かりやすいと思いますので、処理③→関数①→関数②の順番で説明します。

処理③テキストエリアの各イベントに対して関数を割り当てる

ユーザがテキストエリアをクリックするなどして編集領域にカーソルを入れると、テキストエリアはフォーカスを得ます。この「フォーカスを得たとき」というイベントはonfocusイベントで捕捉できます。
id属性がtargetboxである要素のonfocusイベントで、gotfocus関数を実行するには、以下のようにgetElementByIdメソッドを使って記述できます。

document.getElementById("targetbox").onfocus = gotfocus;

ユーザがテキストエリアの外をクリックするなどして編集領域内のカーソルが消えると、テキストエリアはフォーカスを失います。この「フォーカスを失ったとき」というイベントはonblurイベントで捕捉できます。
id属性がtargetboxである要素のonblurイベントで、lostfocus関数を実行するには、以下のようにgetElementByIdメソッドを使って記述できます。

document.getElementById("targetbox").onblur = lostfocus;

関数①フォーカスを得た場合に実行される関数「gotfocus」

これはとても簡単で、単に対象オブジェクト(=this)のstyleプロパティに、高さの値や背景色を代入しているだけです。
高さを10文字分にするためにthis.style.height = "10em";と書いています。ここで、代入する値には単位を付けて10emと記述している点に注意して下さい。この値はあくまでもCSSなので、大きさを指定するには単位が必要です。ここで「10」とだけ書いてしまうと、高さは変化しません。

関数②フォーカスを失った場合に実行される関数「lostfocus」

ここでは、「テキストエリア内に文字があるかどうか」で動作が変わります。
テキストエリア内に1文字も入力されていない場合は元の高さに戻しますが、1文字以上入力されているなら高さはそのままにします。
ただし、ここでは(入力文字数に関係なく)背景色は白色に戻しています。

テキストエリアに入力された文字列はthis.valueで得られます。その文字数はthis.value.lengthで分かります。なので、if文を使って「入力文字数がゼロの場合」を判定できます。
あとは、styleプロパティに値を代入することで、高さや背景色を指定するだけです。

カーソルや文字が入っている間だけ一時的に入力欄を大きく表示するテキストエリアの動作サンプル

上記のHTML+CSS+JavaScriptソースを実際に表示させると、以下のように見えます。

■適当なテキストエリア(入力欄):


上記の動作サンプルは、以下のように動作するはずです。

  • テキストエリア内がクリックされたら、テキストエリアの行数(高さ)が増加されます。
  • テキストエリア外がクリックされたら、
    • 何も入力文字がなければ行数(高さ)が元の分量へ減ります。
    • 何か書かれていれば、行数(高さ)はそのまま変化しません。

以上、テキスト入力欄の編集領域内にカーソルや文字が入っている間だけ、一時的に入力欄の高さを大きく表示するテキストエリアの作り方でした。
ぜひ、使ってみて下さい。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---