3/4 長さを変更できるテキスト入力欄を作る [ホームページ作成] All About

STEP.2 編集領域の増減スクリプトを記述

それでは、テキスト入力欄の長さを変化させるスクリプト（JavaScript）を記述します。以下の3行だけで実現できます。下記のソースをそのままHTML内に記述して下さい。

<script type="text/javascript">
   function ExtendTextarea(size) {
      document.exform.excomment.rows += size;
   }
</script>

■記述上の注意：

「 exform 」は、form要素のname属性の値（フォームの名称）です。
「 excomment 」は、textarea要素のname属性の値（テキスト入力欄の名称）です。

もし、前ページのサンプルとは異なる名称を付けている場合は、上記のソースもそれに合わせて修正して下さい。
※1ページ内に同一名称のフォームや入力欄があると、スクリプトは動作せずエラーになります。

■簡単な解説：
上記のソースでは、「ExtendTextarea」という名称の関数を作成しています。内容は、フォーム内のテキスト入力欄の行数（rows）の値を増減させるものです。「size」という変数を受け取って、その値だけ増減するように記述しています。（増減量は、スクリプトを呼び出すボタン側から指定します。）
※「 += 」は、左辺の変数に右辺の値を足し込む意味です。（記述ミスではありません）

STEP.3 ボタンクリックでスクリプトを実行させる

次に、先ほど作成した「広げる」・「狭める」ボタンをクリックすることで、上記のJavaScriptが実行されるように追記します。

<form name="exform">
   <p>
   コメント：<br>
   <textarea cols="21" rows="5" name="excomment"></textarea><br>
   <input type="button" value="▼広げる(X)" onclick="ExtendTextarea(2);" accesskey="X">
   <input type="button" value="▲狭める(C)" onclick="ExtendTextarea(-2);" accesskey="C">
   </p>
</form>

ボタン（input要素）に「onclick」属性を加えて、先ほど作成した ExtendTextarea関数を実行しています。

「 ExtendTextarea(2); 」は、行数を2行増やす指示で
「 ExtendTextarea(-2); 」は、行数を2行減らす指示です。

増減量は自由に指定して下さい。「1」・「-1」にすれば1行ずつ増減させられますし、「5」・「-5」にすれば一気に5行分ずつ増減させられます。

上記のHTMLを表示させると、以下のように見えます。

これで完成です。
上記の入力欄の下部にある「広げる」ボタンや「狭める」ボタンをクリックしてみて下さい。クリックするたびに、2行分ずつ入力欄（編集領域）が増減します。
※[Alt]＋[X]や[Alt]＋[C]などのアクセスキーも使えます。（必要なキーはOSやブラウザによって異なります。詳しくはこの記事の1ページ目をご参照下さい。）

なお、上記のスクリプトでは、狭めすぎた際にエラーが出てしまったり狭くなりすぎたりしてしまいます。本来、編集領域のサイズは1行未満にはできませんが、上記のスクリプトでは（rows属性の）値を0以下にもできてしまうためです。

そこで最後に、最小サイズと最大サイズを決めておけるスクリプトをご紹介いたします。

最大行数と最小行数を指定する方法へ >>