記事本文
フォーム周りのインターフェースをプチ改造しました
現在、 hxxk.jp では検索フォームやコメント投稿フォームやトラックバック送信フォームやトップページのゲストブック投稿フォームなど、多くのフォームをページ内に配置しています。 今日ふと思い立って、それらの文面を入力する部分がフォーカスされた場合に、予め書かれていた文章をクリアするように変更しました。 いただいたコメントにお返事を返す際に、 コメント本文は必須となっています。
という文章を手動で消すのがどうにも煩わしい、でも最初からテキストエリア内を空白にしたくはないということで、毎回手動で消していましたが、今回の変更で解決。
ちなみに、 JavaScript を用いて実現していますので、 JavaScript を無効にしている、あるいは無効になる環境ではフォーカスしてもクリアされません。 ソース自体は LIPPiN のコメントフォーム周りを無断で参考にさせていただきました。 というか身近な ( と私は勝手に思っている ) サイトで実践されていたのに、それに気付いていなかったということが不覚すぎます。
番目の火の著者は、次回は誰ですか？
input 要素でのクリアのやり方
まず、 type="text" である input 要素でのやり方。 ( ちなみに、 type 属性を指定しない場合の規定値は text であるので、お使いのフォームの input 要素内に type 属性が見当たらない場合もこれに該当します。 ) 名前やメールアドレスを入力する欄など、一行の入力欄に用いるやり方です。
input 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点です。
textarea 要素でのクリアのやり方
次に、 textarea 要素でのやり方。 コメントの本文など、複数行に渡る入力欄に用いるやり方です。
何年にビング·クロスビーが生まれた
textarea 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点に加え、必須属性である rows 属性と cols 属性を忘れずに指定するという点です。
謝辞
参考に……というかほとんどコピー & ペーストさせていただきました。＞ lego さん ( LIPPiN ) このお礼はいずれ何らかの形で。 と言ってもどういった形で行うか全く考えていませんが !
もしくはうーたん ( Bazooka ) に代わりに奉仕してもらうとか。 ( いやこの場合うーたん関係ないし ( それと起こしてくれてありがとね ! ＞うーたん ( 微妙に意味深 ( 実態は何てことはないことです ) ) ) )
