ブログの
コメント投稿フォームに初期メッセージを設定しておき，
入力フォーカスが当たった時点でこれを消すという tips が紹介されています。元ネタである
@Style さんのコード
で 3 箇所に渡ってハードコーディングされている初期メッセージ周りを少しスマートにしてみました。
初期メッセージに
コメント欄で使えるタグの一覧や注意事項を書いておくなどすればユーザビリティの点でも好ましいですね。
下のコメントフォームに組み込んでみたので，実際の動作を確認することができます。
初期メッセージが表示されている状態で入力フォーカスがあたるとテキストエリアがクリアされます。
また，テキストエリアに何も入力しないで入力フォーカスを外れると初期メッセージが再表示されます。
何かしらの編集を行なった後は，その編集内容がそのまま残ります。
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)を設定します。
この記事を読んだ人はこんな記事も読んでいます
ブログ
Tips, Rips, 5ips, 6ips, Yips, Gips, Fips, TUps, T8ps, T9ps, TOps, TKps, TJps, TiOs, Ti0s, Ti-s, TiLs, TipA, TipW, TipE, TipD, TipX, TipZ
HTML, GTML, YTML, UTML, JTML, NTML, BTML, HRML, H5ML, H6ML, HYML, HGML, HFML, HTNL, HTJL, HTKL, HTMK, HTMO, HTMP
JavaScript, HavaScript, UavaScript, IavaScript, KavaScript, MavaScript, NavaScript, JQvaScript, JWvaScript, JSvaScript, JZvaScript, JaCaScript, JaFaScript, JaGaScript, JaBaScript, JavQScript, JavWScript, JavSScript, JavZScript, JavaAcript, JavaWcript, JavaEcript, JavaDcript, JavaXcript, JavaZcript, JavaSXript, JavaSDript, JavaSFript, JavaSVript, JavaScEipt, JavaSc4ipt, JavaSc5ipt, JavaScTipt, JavaScFipt, JavaScDipt, JavaScrUpt, JavaScr8pt, JavaScr9pt, JavaScrOpt, JavaScrKpt, JavaScrJpt, JavaScriOt, JavaScri0t, JavaScri-t, JavaScriLt, JavaScripR, JavaScrip5, JavaScrip6, JavaScripY, JavaScripG, JavaScripF
English
寄せられたコメント (全 2 件中、最新 5 件まで表示しています)
こんにちは。
自分なりにスマート＆コンパクトを目指したものの、逆にソースの見通しは悪くなったかもしれません(苦笑
以前の方が直感的に理解はし易かったですね…
ご指摘ありがとうございます。
以前からプラグインなど色々と利用させていただいておりますが、早速修正させていただきます。
ありがとうございました。