[JavaScript] textareaの高さを自動調節する

フォームはなるべくすっきり見せたいが、textarea要素を配置する場合はある程度ページが長くなってしまう。かといって、rows属性であまり少ない行数を指定すると、ユーザが入力しづらくなる。そこで、ユーザの入力に合わせてtextareaの高さを自動で調整するライブラリを作成した。

使い方

ZIPファイルを解凍後、任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="js/textareaAutoResize.js"></script>

次に、本JSを適用したいtextarea要素のクラス属性に"autoResize"を指定する。

<textarea name="" class="autoResize" cols="80"></textarea>

javascriptの設定

jsファイル内の13～21行目付近にある設定値を編集することで、rows属性の最小・最大値を変更することができる。文字コードがutf-8でない場合は改行コードを対応する値に変更する。

//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
	targetClass : 'autoResize', // 対象とするクラス名
	minRows : 2, // 最小値
	maxRows : 20, // 最大値
	brCode : '\n' // 改行コード
},

[JavaScript] textareaの高さを自動調節する

使い方

javascriptの設定

追記

トラックバックURL

コメント投稿フォーム

Site Search