空のときにHTMLテキストボックスにヒントを表示するにはどうすればよいですか。
Webページの検索ボックスに「検索」という単語を灰色の斜体で表示します。ボックスがフォーカスを受けると、空のテキストボックスのように見えます。すでにテキストがある場合は、テキストを通常どおりに表示する必要があります（黒、斜体ではない）。これは私がラベルを削除することによって混乱を避けるのを助けるでしょう。
ところで、これはページ上の--- Ajax 検索なので、ボタンはありません。
新しいブラウザにのみこの機能を使用したい場合は、HTML 5のプレースホルダ属性によって提供されるサポートを使用することもできます。
<input name="email" placeholder="Email Address">
スタイルがない場合、Chromeでは次のようになります。
デモを試してみることができます こちら およびinCSSによるHTML5プレースホルダスタイリング。
必ず この機能のブラウザ互換性 を確認してください。 Firefoxでのサポートは3.7で追加されました。 Chromeは大丈夫です。 Internet Explorerは10でのみサポートを追加しました。入力プレースホルダをサポートしないブラウザをターゲットとする場合は、 jQuery HTML 5 Placeholder というjQueryプラグインを使用し、それを有効にするために次のJavaScriptコードを追加します。
$('input[placeholder], textarea[placeholder]').placeholder();
それはテキストボックスの透かしとして知られており、それはJavaScriptを介して行われます。
あるいは、jQueryを使っているなら、もっと良い方法があります。
HTMLで placeholder属性 を使用してプレースホルダーを設定できます（ ブラウザサポート ）。 font-styleおよびcolorは、 CSSで変更 にすることができます（ただし、ブラウザのサポートは制限されています）。
input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
color:gray;
font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
color:gray;
font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
color:gray;
font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
color:gray;
font-style:italic;
}<input placeholder="Search" type="search" name="q">特別なCSSクラスを追加および削除し、JavaScriptで入力値onfocus/onblurを変更することができます。
<input type="text" class="hint" value="Search..."
onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">
次に、CSSに必要なスタイルを指定してヒントクラスを指定します。
input.hint {
color: grey;
}
最善の方法は、 jQuery または YUI のようなある種のJavaScriptライブラリを使用してJavaScriptイベントを結び付け、外部の.jsファイルにコードを配置することです。
しかし、手っ取り早い解決策が必要な場合は、これがインラインHTMLソリューションです。
<input type="text" id="textbox" value="Search"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
更新：要求された配色を追加しました。
私が投稿した 私のウェブサイトでこの問題を解決する 少し前に。これを使用するには、単一の.jsファイルをインポートしてください。
<script type="text/javascript" src="/hint-textbox.js"></script>
次に、CSSクラスhintTextboxを使用して、ヒントが必要な入力に注釈を付けます。
<input type="text" name="email" value="enter email" class="hintTextbox" />
より多くの情報と例があります ここ 。
これは、Google AjaxライブラリキャッシュとjQueryの魔法を使った機能的な例です。
これはCSSになります。
<style type="text/stylesheet" media="screen">
.inputblank { color:gray; } /* Class to use for blank input */
</style>
これはJavaScriptコードになります。
<script language="javascript"
type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$("#search_form")
.submit(function() {
alert("Submitted. Value= " + $("input:first").val());
return false;
});
$("#keywords")
.focus(function() {
if ($(this).val() == 'Search') {
$(this)
.removeClass('inputblank')
.val('');
}
})
.blur(function() {
if ($(this).val() == '') {
$(this)
.addClass('inputblank')
.val('Search');
}
});
});
</script>
これがHTMLになります。
<form id="search_form">
<fieldset>
<legend>Search the site</legend>
<label for="keywords">Keywords:</label>
<input id="keywords" type="text" class="inputblank" value="Search"/>
</fieldset>
</form>
GAJAXLibとjQueryの両方に興味を持ってもらえれば十分です。
今はとても簡単になります。 HTMLでは、input要素にプレースホルダー属性を与えることができます。
例：
<input type="text" name="fst_name" placeholder="First Name"/>
詳細を確認してください： http://www.w3schools.com/tags/att_input_placeholder.asp
JQueryプラグインjQuery Watermarkが、上の回答にリストされているものより優れていることがわかりました。どうしていいの？パスワード入力フィールドをサポートしているからです。また、透かしの色（または他の属性）の設定は、CSSファイルに.watermark参照を作成するのと同じくらい簡単です。
jQuery Form Notifier を使用する - これは最も人気のあるjQueryプラグインの1つであり、他のjQuery提案のいくつかが抱えるバグに悩まされることはありません（例えば、心配せずに透かしを自由にスタイルできます）。データベースに保存される場合）.
jQuery Watermarkはフォーム要素に直接単一のCSSスタイルを使用します（透かしに適用されたCSSフォントサイズプロパティもテキストボックスに影響を及ぼした - 私が望んでいたものではないことに気付きました）。 jQueryの透かしのプラスはあなたがフィールドにテキストをドラッグアンドドロップすることができるということです（jQuery Form Notifierはこれを許可しません）。
他の人が提案したもの（digitalbrush.comのもの）は、誤って透かしの値をあなたのフォームに送信するので、私はそれに対して強くお勧めします。
JQueryユーザーの場合：naspinskiのjQueryリンクは壊れているようですが、これを試してください。 http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
あなたはボーナスとして無料のjQueryプラグインチュートリアルを手に入れます。 :)
これは「透かし」と呼ばれます。
私はjQueryプラグインjQuery Watermarkを見つけました。フォームが送信される前の特別な電話）.
あなたは簡単に "Search"と書かれたボックスを持っていることができ、それからフォーカスがそれに変更されたときにテキストが取り除かれます。このようなもの：
<input onfocus="this.value=''" type="text" value="Search" />
もちろん、そうすれば、クリックしたときにユーザー自身のテキストが消えます。だからあなたはおそらくもっと堅牢なものを使いたいでしょう：
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">
背景画像を使用してテキストをレンダリングします。
input.foo { }
input.fooempty { background-image: url("blah.png"); }
それからあなたがしなければならないのはvalue == 0を検出して正しいクラスを適用することだけです：
<input class="foo fooempty" value="" type="text" name="bar" />
そしてjQuery JavaScriptコードはこのようになります：
jQuery(function($)
{
var target = $("input.foo");
target.bind("change", function()
{
if( target.val().length > 1 )
{
target.addClass("fooempty");
}
else
{
target.removeClass("fooempty");
}
});
});
このようなものをonfocusに割り当てます。
if (this.value == this.defaultValue)
this.value = ''
this.className = ''
そしてこれはonblurに：
if (this.value == '')
this.value = this.defaultValue
this.className = 'placeholder'
（フレームワーク関数のように、クラス名を切り替えるためには、もう少しわかりやすいものを使用できます。）
このようなCSSでは：
input.placeholder{
color: gray;
font-style: italic;
}
ページが最初に読み込まれたときに、必要に応じて検索がテキストボックスに灰色で表示されます。
入力ボックスにフォーカスが移動したら、検索ボックスですべてのテキストを選択してユーザーが入力を開始できるようにします。これにより、選択したテキストがプロセスで削除されます。削除するために前のテキストを手動でハイライトする必要がないため、ユーザーが検索ボックスをもう一度使用する場合も、これはうまく機能します。
<input type="text" value="Search" onfocus="this.select();" />
シンプルで明確な「知識ちくせ」の解決策が好きです。初期状態を設定するページロードの準備ができたときにぼかすための呼び出しを追加する必要があるだけです。
$('input[value="text"]').blur();