Open MagicVox.net
コメントフォームのテキストエリアは、それなりの広さを用意しているつもりでも、長文コメントを残してくださるビジタにとっては手狭かもしれません。必要に応じてコメントフォームのテキストエリアを伸縮できるよう、ちょっとしたボタンを用意する方法です。
"大きくする"ボタンと"小さくする"ボタンを用意しておき、ボタンがクリックされるとテキストエリアのサイズを伸張できるようにします。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>
English