ブログのコメント投稿フォームをちょっぴり親切にする

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

 ブログのコメント投稿フォームに初期メッセージを設定しておき、入力フォーカスが当たった時点でこれを消すという tips が紹介されています。元ネタである@Style さんのコード で 3 箇所に渡ってハードコーディングされている初期メッセージ周りを少しスマートにしてみました。
 初期メッセージにコメント欄で使えるタグの一覧や注意事項を書いておくなどすればユーザビリティの点でも好ましいですね。

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

<textarea id="comment-text" name="text" rows="15" cols="50"
  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>

 下のコメントフォームに組み込んでみたので、実際の動作を確認することができます。
 初期メッセージが表示されている状態で入力フォーカスがあたるとテキストエリアがクリアされます。また、テキストエリアに何も入力しないで入力フォーカスを外れると初期メッセージが再表示されます。何かしらの編集を行なった後は、その編集内容がそのまま残ります。
 textarea 内のテキストを初期メッセージとして使用するので、初期メッセージを変更したい場合はこれを変更すればOKです。

Windows XP の Internet Explorer 6.0, Firefox 1.5, Netscape 7.1, Opera 9.1.0 で動作確認済み

JavaScriptの簡単な解説

onfocus="..."
テキストエリアに入力フォーカスが当たった時に呼び出されるイベントハンドラです。
(t=this).def_value||(t.def_value=t.value);
this.def_valueが未設定の場合、 現在のテキストエリアの内容を初期メッセージ(def_value)として退避しておきます。
t.def_value==t.value&&(t.value='');
テキストエリアの内容が初期メッセージと同じだった場合、テキストエリアの内容をクリアします。
onblur="..."
テキストエリアから入力フォーカスが外れた時に呼び出されるイベントハンドラです。
(t=this).value==''&&(t.value=t.def_value);
テキストエリアの内容が空欄だった場合、退避しておいた初期メッセージ(def_value)を設定します。
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事のアーカイブ

全ての記事 »
2007年
全てのカテゴリ »
電算室 » 開発メモ
全てのタグ »
, , ,

関連記事/トラックバック

関連記事/トラックバックはまだありません

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

寄せられたコメント (全 2 件中、最新 5 件まで表示しています)

Posted by
ぴろり ◆OLEEi.VOX.ぴろり ◆OLEEi.VOX.
at
2007/01/17 02:55
ID
ozjQbu/Y
こんにちは。
自分なりにスマート&コンパクトを目指したものの、逆にソースの見通しは悪くなったかもしれません(苦笑
以前の方が直感的に理解はし易かったですね…
Posted by
@Style@Style
at
2007/01/16 23:16
ID
zTiz.Jus
ご指摘ありがとうございます。
以前からプラグインなど色々と利用させていただいておりますが、早速修正させていただきます。
ありがとうございました。

コメントを投稿する

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