2007-01-08

コメントフォーム

textareaには入力を解りやすくする為に何かテキストを記述しておくべきですが、入力する時点で表示されたテキストを削除する必要があります。これはコメントをいただく際に非常に面倒な作業となります。

イベントハンドラ(onfocusonblur)を使ってMovableTypeのコメントフォームをちょっとかっこよくしてみます。

<textarea id="comment-text" name="text" rows="15" cols="50" tabindex="5" accesskey="t" onfocus="if(this.value=='Leave your comment here.'){this.value='';}" onblur="if(this.value==''){this.value='Leave your comment here.';}">Leave your comment here.</textarea>

このブログで実装しています

idnametabindexaccesskeyはご自身の環境に合わせて変更してください。

1月16日追記

Open MagicVox.net[外部へのリンク]のぴろりさんよりご指摘いただきました。

ブログのコメント投稿フォームをちょっぴり親切にする[外部へのリンク]

上記リソースを参考に以下のように修正いたしました。

<textarea id="comment-text" name="text" rows="15" cols="50" tabindex="5" accesskey="t" onfocus="(t=this).def_value||(t.def_value=t.value);t.def_value==t.value&amp;&amp;(t.value='');" onblur="(t=this).value==''&amp;&amp;(t.value=t.def_value);">Leave your comment here.</textarea>

投稿者 @Style : 2007年01月08日 17:55

前のエントリー:テンプレートバージョン2.0をご利用の皆様へ
次のエントリー:エントリータイトル

トラックバック

このエントリーのトラックバックURL:
http://atstyle.biz/blog/mt-tb.cgi/596

このリストは、次のエントリーを参照しています: コメントフォーム:

» ブログのコメント投稿フォームをちょっぴり親切にする from Open MagicVox.net
 ブログのコメント投稿フォームに初期メッセージを設定しておき, 入力フォーカスが当たった時点でこれを消すという tips が紹介されています。 元ネタであ... [続きを読む]

トラックバック時刻: 2007年01月16日 13:15

コメント

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

スポンサード リンク

ページ先頭へ