HTML の文章入力欄の高さを自動的に増加させる

概要

読者は HTML のフォームの文章入力欄の高さよりも多くの文章を入力したいことがあります。 通常 scroll の機能が提供されていますが、高さが十分取られていないと不便です。 そこで、内容に応じて高さを自動的に増加させる方法を紹介します。

はじめに

HTML のフォーム機能の一つに複数行の文章入力制御子 (textarea 要素) があります。 読者 (利用者) はこの制御子の入力欄に文章を入力し、 利用者エージェントにこれをフォーム制御エージェントに提出させることができます。

通常、著者は読者が入力するであろう文章量を見越して rows 属性の値を指定したり、スタイル・シートによって高さを指定したりします。 しかし、その見積もりが甘い場合や設計上の理由からあまり高さを (≒ 場所を) 取りたくないこともあります。

文章量が入力欄の大きさを超えた場合、利用者エージェントは scroll bar などによって表示範囲を制御できるようにするのが普通です。 しかし、十分な高さが取られていないと scroll bar が使いにくいなどの問題があるかもしれません。

このような問題は、 利用者エージェントが入力欄の大きさを手動または自動で変更する機能を実装すれば解決します。 しかし、この文書では、利用者エージェントの変更を待たずにスタイル・シートの指定のみで著者がこの問題を解決するための方法を紹介します。

著者のスタイル・シートではなく利用者のスタイル・シートを使えば、 利用者も利用者エージェントの改善を待たずにこの機能を利用できます。

使い方

簡単な使い方

スタイル・シートの先頭に 
@import 'https://suika.suikawiki.org/www/style/ui/textarea-autosizer-maxheight25.css';
と書き足して下さい。

スタイル・シートに @charset 規則がある場合、それよりは後に追記して下さい。

より高度な使い方

文章入力欄の大きさの自動変更機能は、 XBL または HTC を使って実装しています。それを CSS の特性によって文書に結び付けます。

XBL (Gecko 系) と HTC (WinIE) では使用する特性が違います。 そのため次の例のように両者を併記します。 

textarea {
  behavior: url(https://suika.suikawiki.org/www/style/ui/textarea-autoheight.htc);
  -moz-binding: url(https://suika.suikawiki.org/www/style/ui/textarea-autosize#rows);
}
高さ制限なしの例

基本的にはこの例の指定だけで機能しますが、 利用者の入力に従って高さが際限なく増えていきます。 それではかえって使いづらいので、適当な上限を設定します。 次の例では上限を25行としています。

textarea {
  max-height: 25em;
  behavior: expression(this.setAttribute('autoheight:max-rows', 25),
                       'url(https://suika.suikawiki.org/www/style/ui/textarea-autoheight.htc)');
  -moz-binding: url(https://suika.suikawiki.org/www/style/ui/textarea-autosize#rows);
}

同じ内容のスタイル・シートを別途用意しています。 それをそのまま使用する方法は前の例をご覧下さい。

高さ制限25行の例

Gecko など CSS 2 に対応した Web ブラウザには max-height 特性を指定すれば十分です。しかし、 WinIE のような古い Web ブラウザはこの特性に対応していません。 そこで、 HTC 版は autoheight:max-rows 属性の値 (正整数で、単位は行) が指定されていればそれを最大値とみなします。

属性名にコロンが含まれますが、 XML 名前空間とは関係ありません。しかし、気持ちが悪いのであれば文書の html 要素にでも 
xmlns:autoheight="http://suika.fam.cx/~wakaba/archive/2005/3/textarea#"
と名前空間を宣言する属性を追加して下さい。 (名前空間接頭辞は変えないで下さい。)

例

この章では実際に文章入力欄の例を示します。 対応した利用者エージェント (Gecko 系 Web ブラウザや WinIE) で実際に文章を入力して試してみてください。

改行するごとに欄が大きくなりますが、25行を超えるとそれ以上大きくなりません。 行を減らしても一度大きくなった欄は元には戻りません。

元々4行の大きさの入力欄

実際の使用例

次のサイトで実際に使用しています (順不同)。

問題点

関連ファイル

この階層の textarea-auto から始まる名前のファイルが関連する実装やスタイル・シートの例です。

各ファイルは Git で版管理しています。

License

関連するファイルは MPL 1.1/GPL 2.0/LGPL 2.1 で配布しています。詳しくは各ファイルの注釈をご覧下さい。

[/ Web スタイル・シート 利用者界面]