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

Posted by
ぴろり
Posted at
2007/01/16 12:50
Trackbacks
関連記事 (0)
Comments
コメント (2)
Post Comment
コメントできます
Category
開発メモ カテゴリ
 投稿フォームに初期メッセージを設定しておき, 入力フォーカスが当たった時点でこれを消すという tips が紹介されています。元ネタである @Style さんのコード で 3 箇所に渡ってハードコーディングされている初期メッセージ周りを少しスマートにしてみました。
 初期メッセージに欄で使えるタグの一覧や注意事項を書いておくなどすればユーザビリティの点でも好ましいですね。
この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する

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

XP の Internet Explorer 6.0, 1.5, Netscape 7.1, 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 件まで表示しています)

Posted by
ぴろり ◆OLEEi.VOX.
at
2007/01/17 02:55
ID
ozjQbu/Y

こんにちは。
自分なりにスマート&コンパクトを目指したものの、逆にソースの見通しは悪くなったかもしれません(苦笑
以前の方が直感的に理解はし易かったですね…

Posted by
@Style
at
2007/01/16 23:16
ID
zTiz.Jus

ご指摘ありがとうございます。
以前からプラグインなど色々と利用させていただいておりますが、早速修正させていただきます。
ありがとうございました。

コメントを投稿する

 (必須/公開)
 (必須/非公開)
 
 (必須)
コメントスパム防止のため投稿前に ランダムな数字 ? を入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。