Home > CSS | design > formに書いておいた文字をクリックしたときに消す。

formに書いておいた文字をクリックしたときに消す。

タイトルの書き方がイマイチ分かりにくいですね。こんなのです↓

サンプルとして入れておいたformの文字列をクリックしたときに消す方法です。

<input type="text" onfocus="if (this.value == 'サンプル') this.value = '';" onblur="if (this.value == '') this.value = 'サンプル';" value="サンプル" />

onfocus とはマウスがのっている時にある処理を行うイベントハンドラ。onblur はその onfocus が外れた時に処理行うイベントハンドラです。
文字などの装飾は、CSSで。
上記サンプルでは、input:hover　にborder-colorがかかっています。

input:hover {
border-color:#00A0DD;
}

Comments:1

Trackback URL for this entry: http://www.coral-design.net/css/210.html/trackback
Listed below are links to weblogs that reference: formに書いておいた文字をクリックしたときに消す。 from WEB制作のメモ帳 - coral design

Home > CSS | design > formに書いておいた文字をクリックしたときに消す。

Event

About Me

Pages

Recent Entries

Categories

Archives

Tag Cloud

Search

Feeds

Meta

Return to page top