ブログのコメント投稿フォームに初期メッセージを設定しておき、入力フォーカスが当たった時点でこれを消すという tips が紹介されています。元ネタである@Style さんのコード
で 3 箇所に渡ってハードコーディングされている初期メッセージ周りを少しスマートにしてみました。
初期メッセージにコメント欄で使えるタグの一覧や注意事項を書いておくなどすればユーザビリティの点でも好ましいですね。
<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 で動作確認済み
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
)を設定します。
寄せられたコメント (全 2 件中、最新 5 件まで表示しています)
自分なりにスマート&コンパクトを目指したものの、逆にソースの見通しは悪くなったかもしれません(苦笑
以前の方が直感的に理解はし易かったですね…
以前からプラグインなど色々と利用させていただいておりますが、早速修正させていただきます。
ありがとうございました。