人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

検索枠に「○○を入れてください」みたいなものを見ます。あれはどうすれば作れるのでしょうか?

フォーカスが入ると消えますし、たまにグレーなものも見ます。

CSSだけ?もしくは、JS+CSS?

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS js フォーカス 検索
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Marine-Blue
●23ポイント

JavaScriptです。例えばはてなダイアリーだったらこういうものを使っているようです。

1.外部スクリプト

http://d.hatena.ne.jp/js/textinput_description.js

2.本文に実行命令の記述

<script type="text/javascript">
Event.observe(window, 'load', function() {
 new TextInputDescription($('comment-username'), $('comment-form'), 'なまえ');
 new TextInputDescription($('comment-captcha'), $('comment-form'), '画像内の文字列を入力して下さい');
}, false);
</script>
◎質問者からの返答

ありがとうございます。

はてなのをそのまま使うわけにも行きませんが、何をしているのかは探れそうですね。

できれば、公開されているクラスなどないものなのでしょうか?


2 ● まきのっぴ
●23ポイント

フォーカスをあてると消えるのは JavaScript でないとできないですね。

ブログのコメント投稿フォームをちょっぴり親切にする - Open MagicVox.net


グレーで薄く出していて、フォーカスをあてると色が変わるのは、focus 疑似クラスを使えば CSS だけで可能ですが、(フォーカスのあるフォームの装飾を変化させる - スタイルシートTIPS ふぁくとりー) 残念ながら IE が対応していないので、結局 JavaScript で CSS を操作することになります。

MovableType備忘録: Highlight active input

JavaScript初心者入門講座: JavaScriptで背景色を変える方法

◎質問者からの返答

なるほど。ありがとうございます。


3 ● Yota
●22ポイント

単純化すると、こんな感じでしょうか。

<form>
 <input type="text" size="30" style="color:gray" value="検索キーワード" onfocus="this.value=''" />
 <input type="submit" value="検索"/>
</form>
◎質問者からの返答

ありがとうございます。

シンプルでいいですね


4 ● Cecilchan
●22ポイント

CSSファイルで

input.field {color: #444444;}

外部JSファイルで

function doclear(target) {

if (target=='before') {

document.getElementById("search").WORD.value = "";

}

HTMLで

<input type="text" name="WORD" size="19" class="field" value="サイト内検索" id="serh" onfocus="doclear('before');" />

こんな感じであたしはやってます。

◎質問者からの返答

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ