きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

カスタマイズ

JavaScriptを使って検索欄等の背景色や文字を消したり変えたりする方法

投稿日:2012.06.12 更新日:

search_onfocus

ブログの検索欄やコメント欄の見栄えを良くしたいと思ったことはないですか?

search_onfocus

よくブログ等の検索欄で、 "Search" や"検索"、コメント欄で "コメントをどうぞ" という文字が表示されていて、クリックをすると消えるのを見かけると思います。
JavaScriptの "onfocus" を使用します。

onfocus属性とonblur属性は、 よく組み合わせて使われるイベントハンドラ(JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のこと)です。
例えば、検索欄がクリックされるなどして、選択された状態になることを「フォーカスがあたる」といいます。これらのイベントは、フォーカスを得た時(onfocus)、フォーカスを失った時(onblur)に発生します。
つまり、クリックされた時とされていない時のイベントを指定してあげます。

サンプルコード

<input style="background: #f1f1f1; color: #000; margin-left: 20px; padding: 0;
  width:300px; height: 30px;"
  onfocus="if (this.value == 'テスト検索欄') this.value = '';
  this.style.background = '#fff';"
  onblur="if (this.value == '') this.value = 'テスト検索欄';
  this.style.background = '#f1f1f1';
  this.style.color = '#000';"
  type="text" value="テスト検索欄"
/>

 という上記の感じになります。
styleは、直接書かずに外部cssファイルに書き、読み込んだ方がコードはすっきりすると思います。

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-カスタマイズ
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.