2007年1月08日
コメントフォーム
Posted by @Style : 
17:55
| 
コメント (0)
| 
トラックバック (1)
textareaには入力を解りやすくする為に何かテキストを記述しておくべきですが、入力する時点で表示されたテキストを削除する必要があります。これはコメントをいただく際に非常に面倒な作業となります。
イベントハンドラ（onfocus・onblur）を使って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>このブログで実装しています
id・name・tabindex・accesskeyはご自身の環境に合わせて変更してください。
1月16日追記
Open MagicVox.net![[外部へのリンク]](http://atstyle.biz/webimg/link.gif){kind=small}
のぴろりさんよりご指摘いただきました。
上記リソースを参考に以下のように修正いたしました。
<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&&(t.value='');" onblur="(t=this).value==''&&(t.value=t.def_value);">Leave your comment here.</textarea>
前のエントリー：テンプレートバージョン2.0をご利用の皆様へ
次のエントリー：エントリータイトル
関連記事
- MT DDC Tokyo テーマ編へ行ってきました
- HTML5のMovable Type 5テーマ完成しました
- HTML5のMovable Type 5テーマ作成中（その3）
- HTML5のMovable Type 5テーマ作成中（その2）
- MT5テーマを5,000円オフのキャンペーン
- HTML5のMovable Type 5テーマ作成中
- zenback ベータテスト開始！
- MovableType 4.2 2Column HTML5の解説（サイドバー）
- MovableType 4.2 2Column HTML5の解説（コメントフォーム）
- MovableType 4.2 2Column HTML5の解説（ブログ記事）
トラックバック
このエントリーのトラックバックURL:
http://atstyle.biz/blog/mt-tb.cgi/596
このリストは、次のエントリーを参照しています: コメントフォーム:
» ブログのコメント投稿フォームをちょっぴり親切にする from Open MagicVox.net
ブログのコメント投稿フォームに初期メッセージを設定しておき， 入力フォーカスが当たった時点でこれを消すという tips が紹介されています。 元ネタであ... [続きを読む]
トラックバック時刻: 2007年1月16日 13:15
コメント
Buy Now
