はじめに

テキスト入力フォームに初期値を設定し、クリックしたときにクリアされる。そういうの欲しいなーと思ったので、調べてみました。

Contents

完成サンプル

まずは、実際の完成サンプルを見てみましょう。こんな感じになります。

どうでしょうか、文字が消えたと思います。ちなみに、入力せずにフォーカスを外すと、また初期値が入るようになっています。
それでは、実際のコードを見てみましょう。

実装コード

<input type="text" value="クリックでこの文字が消えます" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"/>

実際のコードはこのようになっています。
オンフォーカスで入力値(value)と初期値が同じならばvalueに空を代入。オンブラーでvalueが空(入力がない)なら初期値をvalueに代入しているのですね。

どうしてもクリック時に消したいときはこの方法を使えばいいのですが、そうでなければ、input要素のplaceholder属性でも同じような役割を果たしてくれます。
こちらも合わせてどうぞ。

HTML|HTML5|input要素のplaceholder属性で初期値表示

参考サイト