検索窓をクリックした時に、既存で入っている文字を消す技
私のブログにも取り入れているのですが、よく検索窓に文字が入っていて、いざ検索しようとクリックすると、入っていた文字が消えて文字が打ち込めるというものです。まぁ小技といったところでしょうか。でも、こうしたちょっとした気遣いがプロっぽくみせる方法の一つかもしれません。
サンプル:
- onfocus と onblurを適用。
- onfocus とはマウスがのっている時にある処理を行うイベントハンドラ。onblur はその onfocus が外れた時に処理行うイベントハンドラです。
- 実際のソースはこんな感じ
- <input type="text" onfocus="if (this.value == '検索窓') this.value = '';" onblur="if (this.value == '') this.value = '検索窓';" value="検索窓" />
- 文字の色、背景はclass属性でcssで装飾を
- input class="hogehoge"でcssで装飾していきます。
検索窓をクリックした時に、既存で入っている文字を消す技