Movable Typeのコメントフォームに大きさを調整するボタンを付ける

閲覧してもらった人にストレスなくコメントしてもらうためにもコメントフォームは「適度な大きさ」にする必要があります。
しかし、長文コメントをもらう場合やブログのレイアウト上大きなスペースがとれない場合などがあり、コメントフォームの「適切な大きさ」を判断するのが難しいところです。
Open MagicVox.netでは「コメントフォームにテキストエリアを伸縮できるボタンを付ける」方法を紹介しています。

使用方法
コメントフォームの上に画像を置くためformの上あたりに以下を書き込みます。
<img alt="大きく" src="<$MTStaticWebPath$>images/field-bigger.gif" onclick="return resizeTextarea(+5);" />
<img alt="小さく" src="<$MTStaticWebPath$>images/field-smaller.gif" onclick="return resizeTextarea(-5);" />

さらにスクリプトを以下のように書きめば完成です。
<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>

もちろんMTでなくてもできますが、document.comments_form.text.rowsの「comments_form」の部分とtextareaに指定した「id名」を一緒にする必要がありそうです。

sponsors

「Movable Typeのコメントフォームに大きさを調整するボタンを付ける」をシェアする

記事作成:
記事URL:

TOP > > Movable Typeのコメントフォームに大きさを調整するボタンを付ける