ネット上で何かを検索したい時、どこを見ますか？
そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。
たまに見るのが検索窓に薄い文字で予め文字が入っている場合です。
Apple のサイトでは「検索：Apple.com」と何処の検索なのか明示しています。その他によくあるのは検索窓に「キーワードを入力」と書かれているケースがありますね。今回はその方法について焦点を当てます。
検索窓に薄い文字を入れる方法その１
方法は2つほどありますが、まずは javascript を使う方法です。
html
<form> <input type="text" onfocus="placeholders()" value="キーワードを入力" id="placeholder" /> </form>
サンプル用の簡単なものです。value 属性で予め入れておきたいテキストを書きます。javascript と css 用に ID を指定し、テキストボックスをクリックしてアクティブになったら onfocus 属性が有効になり javascript の関数を動作させています。
css
<style type="text/css">
#placeholder{
color:#666;
}
</style>
そのままでは予め入れておくテキストも黒になってしまうので、css で少し文字色を薄くします。
javascript
<script type="text/javascript">
<!--
function placeholders(){
var obj = document.getElementById("placeholder");
if(obj.value == 'キーワードを入力'){
obj.value = "";
obj.style.color = '#000';
}
}
-->
</script>
テキストボックスに入っている文字が「キーワードを入力」だったら、テキストボックスの中身を空にして文字色を黒に変更しています。
javascript 非対応のブラウザの為にスクリプトをコメントアウトしています。今どき非対応の物なんてあるのか？と思いましたが、i-mode などフィーチャーフォンがありました。ネット閲覧もスマホが主流になる中、いつまで考慮する必要があるんでしょうかね。
検索窓に薄い文字を入れる方法その２
javascript を使う方法だと色々とごちゃごちゃしてややこしいですが、実はもっと簡単な方法がありました。従来は javascript を使う方法が主流だったのですが、次の方法は最近可能になったものです。
それは html5 です。
html5 で サイトを作って置かなければいけませんが html5 では javascript や css も使うこと無く完結する事ができます。具体的には以下のように書きます。
<input type="text" placeholder="キーワードを入力">
たったこれだけです。たったこれだけなのに最初に挙げた方法より優れています。
- 予め設定した文字が消えるのはユーザーが文字を入力した時
- テキストボックスが空になったら予め設定した文字に戻る
- 文字色の指定をしなくても最初から薄い
html5 ですので IE8 以下など古いブラウザには対応できません。しかし、2014年末に html5 が正式勧告されました。古いブラウザでも html5 に対応できるスクリプトもあるので十分実用性があるものになりました。
以下のスクリプトで IE8 以下にも html5 の要素が使えるようになります。
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
おわりに
予め検索窓に薄い文字を入れておく事は助けになる事もありますが、使い道を誤ると逆に不便になる事もあります。あまり長い文章を入れておくのは不向きで、あくまで補助的な説明に留めておきましょう。