コメントフォームにテキストエリアを伸縮できるボタンを付ける

Posted by
ぴろり
Posted at
2007/06/12 16:32
Trackbacks
関連記事 (1)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 コメントフォームのテキストエリアは、それなりの広さを用意しているつもりでも、長文コメントを残してくださるビジタにとっては手狭かもしれません。必要に応じてコメントフォームのテキストエリアを伸縮できるよう、ちょっとしたボタンを用意する方法です。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

 "大きくする"ボタンと"小さくする"ボタンを用意しておき、ボタンがクリックされるとテキストエリアのサイズを伸張できるようにします。MovableTypeの記事編集画面にも同じものが付いていますよね。あれをコメントフォームにくっ付けてしまおうというアイディアです。
 簡単な JavaScript のコードだけなので、様々なブログシステムや Web ページでそのまま使えると思います。大きくしたいケースはあっても、小さくするニーズはほとんど無さそうなので、小さくするボタンは無くてもいいかもしれません。

<img title="大きく" alt="大きく" src="/images/field-bigger.gif" onclick="return resizeTextarea(+5);">
<img title="小さく" alt="小さく" src="/images/field-smaller.gif" onclick="return resizeTextarea(-5);">

<form name="comments_form">
コメント:
<textarea name="text"></textarea>
</form>

// コメント入力欄のリサイズ
<script>
function resizeTextarea (d)
{
	var minRows = 5; // このサイズ以下には小さくできません
	var maxRows = 50; // このサイズ以上には大きくできません
	var rows = document.comments_form.text.rows + d;
	rows = rows < minRows ? minRows : rows;
	rows = maxRows < rows ? maxRows : rows;
	document.comments_form.text.rows = rows;
	return false;
}
</script>
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック (全 1 件中、最新 5 件まで表示しています)

Open MagicVox.net のスクリーンショット
タイトル
コメント欄のサイズをマウスドラッグで変更できるようにする
Trackbacked at
2008/08/21 15:11
from
Open MagicVox.net
概要
 ブログのコメント欄のサイズをマウスドラッグで自由に伸縮できるようにする方法を紹介します。以前にコメント欄を伸縮できるボタンを設置する方法を紹介しました...

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。