《 1:07 PM 公開/更新》
ウェブ上の入力欄では、テキストエリアの表示行数(高さ)をユーザの操作に合わせて動的に変更すると便利な場合があります。複数行の入力を求めるとき、最初から大きな入力欄を表示していると、入力するつもりのないユーザにとっては邪魔になってしまうでしょうから。そこで、ユーザがテキストエリア内部にカーソルを入れた状態のときや、テキストエリア内部に文字が入力されている間にだけ、一時的に入力欄の行数(高さ)を大きく広げて表示する方法をご紹介。
ウェブ上の入力欄では、テキストエリアの表示行数(高さ)をユーザの操作に合わせて動的に変更すると便利な場合があります。複数行の入力を求めるとき、最初から大きな入力欄を表示していると、入力するつもりのないユーザにとっては邪魔になってしまうでしょうから。
解決策としては、ユーザがテキストエリア内部にカーソルを入れた状態のときや、テキストエリア内部に文字が入力されている間にだけ、一時的に入力欄の行数(高さ)を大きく広げて表示する方法があります。
テキストエリアの表示行数(高さ)を条件に応じて動的に変化させる方法は、JavaScriptを使えば簡単です。
まずは、HTMLで対象のテキストエリアを作成し、何も操作していない標準状態の見え方(装飾)をCSSで作成しておきます。最後にJavaScriptを加えて、ユーザの操作や条件に応じてテキストエリアの装飾が動的に変化するよう作れば完成です。以下に、HTMLソース→CSSソース→JavaScriptソースの順に紹介・解説します。記述量は短いので、わりと簡単です。
まずは、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で装飾を追加しましょう。
テキストエリア(textarea要素)をまったく装飾せずに使うケースはあまりないでしょう。少なくとも横幅(文字数)や高さ(行数)は指定するでしょうし、おそらくページデザインに合わせて枠線や背景なども装飾したいケースが多いのではないでしょうか。
ここでは、ユーザの操作や条件に応じてテキストエリアの高さを変化させることが目的なので「デフォルトの高さ」さえ指定していれば充分なのですが、それだけだと見栄えがあまりよろしくないので、枠線や背景色の指定なども同時に加えています。
CSSソース
#targetbox {
border: 2px solid #0a0; /* 枠線 */
border-radius: 0.67em; /* 角丸 */
padding: 0.5em; /* 内側の余白量 */
background-color: #fff; /* 背景色 */
width: 20em; /* 横幅 */
height: 3em; /* 高さ */
}
上記のCSSソースで重要なのは7行目のheightプロパティだけです。ここで、テキストエリアの標準状態の行数を指定しています。「カーソルが入っておらず、文字も入力されていない状態なら、邪魔にならないようにする」のが目的なので、小さめに指定しておくのが良いでしょう。
それ以外のポイントをざっと解説しておきます。
CSSは以上です。
次に、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つの内容に分けられます。
まずは、③から説明する方が分かりやすいと思いますので、処理③→関数①→関数②の順番で説明します。
ユーザがテキストエリアをクリックするなどして編集領域にカーソルを入れると、テキストエリアはフォーカスを得ます。この「フォーカスを得たとき」というイベントはonfocusイベントで捕捉できます。
id属性がtargetboxである要素のonfocusイベントで、gotfocus関数を実行するには、以下のようにgetElementByIdメソッドを使って記述できます。
document.getElementById("targetbox").onfocus = gotfocus;
ユーザがテキストエリアの外をクリックするなどして編集領域内のカーソルが消えると、テキストエリアはフォーカスを失います。この「フォーカスを失ったとき」というイベントはonblurイベントで捕捉できます。
id属性がtargetboxである要素のonblurイベントで、lostfocus関数を実行するには、以下のようにgetElementByIdメソッドを使って記述できます。
document.getElementById("targetbox").onblur = lostfocus;
これはとても簡単で、単に対象オブジェクト(＝this)のstyleプロパティに、高さの値や背景色を代入しているだけです。
高さを10文字分にするためにthis.style.height = "10em";と書いています。ここで、代入する値には単位を付けて10emと記述している点に注意して下さい。この値はあくまでもCSSなので、大きさを指定するには単位が必要です。ここで「10」とだけ書いてしまうと、高さは変化しません。
ここでは、「テキストエリア内に文字があるかどうか」で動作が変わります。
テキストエリア内に1文字も入力されていない場合は元の高さに戻しますが、1文字以上入力されているなら高さはそのままにします。
ただし、ここでは(入力文字数に関係なく)背景色は白色に戻しています。
テキストエリアに入力された文字列はthis.valueで得られます。その文字数はthis.value.lengthで分かります。なので、if文を使って「入力文字数がゼロの場合」を判定できます。
あとは、styleプロパティに値を代入することで、高さや背景色を指定するだけです。
上記のHTML＋CSS＋JavaScriptソースを実際に表示させると、以下のように見えます。
上記の動作サンプルは、以下のように動作するはずです。
以上、テキスト入力欄の編集領域内にカーソルや文字が入っている間だけ、一時的に入力欄の高さを大きく表示するテキストエリアの作り方でした。
ぜひ、使ってみて下さい。
()
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)
