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


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

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

回答の条件
  • 1人2回まで
  • 登録:2007/07/24 19:40:50
  • 終了:2007/07/31 19:45:03

回答(4件)

id:Marine-Blue No.1

Marine-Blue回答回数237ベストアンサー獲得回数122007/07/24 20:03:25

ポイント23pt

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>
id:dingding

ありがとうございます。

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

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

2007/07/24 21:04:15
id:pmakino No.2

まきのっぴ回答回数352ベストアンサー獲得回数282007/07/24 21:06:45

ポイント23pt

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

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


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

MovableType備忘録: Highlight active input

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

id:dingding

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

2007/07/24 22:27:57
id:Yota No.3

Yota回答回数453ベストアンサー獲得回数282007/07/25 09:33:15

ポイント22pt

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

		<form>
		 <input  type="text" size="30" style="color:gray" value="検索キーワード" onfocus="this.value=''" />
		 <input type="submit" value="検索"/>
		</form>
	
id:dingding

ありがとうございます。

シンプルでいいですね

2007/07/25 11:53:03
id:Cecilchan No.4

Cecilchan回答回数13ベストアンサー獲得回数12007/07/25 10:54:48

ポイント22pt

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');" />

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

id:dingding

ありがとうございます。

2007/07/25 11:52:14

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません