記事本文
フォーム周りのインターフェースをプチ改造しました
現在、 hxxk.jp では検索フォームやコメント投稿フォームやトラックバック送信フォームやトップページのゲストブック投稿フォームなど、多くのフォームをページ内に配置しています。
今日ふと思い立って、それらの文面を入力する部分がフォーカスされた場合に、予め書かれていた文章をクリアするように変更しました。
いただいたコメントにお返事を返す際に、
コメント本文は必須となっています。
という文章を手動で消すのがどうにも煩わしい、でも最初からテキストエリア内を空白にしたくはないということで、毎回手動で消していましたが、今回の変更で解決。
ちなみに、 JavaScript を用いて実現していますので、 JavaScript を無効にしている、あるいは無効になる環境ではフォーカスしてもクリアされません。 ソース自体は LIPPiN のコメントフォーム周りを無断で参考にさせていただきました。 というか身近な ( と私は勝手に思っている ) サイトで実践されていたのに、それに気付いていなかったということが不覚すぎます。
input 要素でのクリアのやり方
まず、
type="text"
である input 要素でのやり方。
( ちなみに、 type 属性を指定しない場合の規定値は
text であるので、お使いのフォームの input 要素内に type 属性が見当たらない場合もこれに該当します。 )
名前やメールアドレスを入力する欄など、一行の入力欄に用いるやり方です。
<input type="text" onfocus="if (this.value == '初期入力値') this.value = '';" onblur="if (this.value == '') this.value = '初期入力値';" value="初期入力値" />
input 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点です。
textarea 要素でのクリアのやり方
次に、 textarea 要素でのやり方。 コメントの本文など、複数行に渡る入力欄に用いるやり方です。
<textarea rows="表示行数を示す数字" cols="表示幅を示す数字" onfocus="if (this.value == '初期入力値') this.value = '';" onblur="if (this.value == '') this.value = '初期入力値';">初期入力値</textarea>
textarea 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点に加え、必須属性である rows 属性と cols 属性を忘れずに指定するという点です。
