空のときにHTMLテキストボックスにヒントを表示するにはどうすればよいですか？

Webページの検索ボックスに「検索」という単語を灰色の斜体で表示したい。ボックスがフォーカスを受け取ると、空のテキストボックスのように見えるはずです。既にテキストが含まれている場合は、通常のテキスト（黒、斜体以外）が表示されます。これにより、ラベルを削除して整理できます。

ところで、これはページ上のAjax検索なので、ボタンはありません。

別のオプションとして、この機能を新しいブラウザーでのみ使用できる場合は、HTML 5のプレースホルダー属性が提供するサポートを使用することができます。

<input name="email" placeholder="Email Address">

スタイルがない場合、Chromeでは次のようになります。

こことHTML5のプレースホルダースタイリングでCSSを使用してデモを試すことができます。

この機能のブラウザの互換性を確認してください。Firefoxでのサポートは3.7で追加されました。クロムは結構です。Internet Explorerは10でのみサポートを追加しました。入力プレースホルダーをサポートしないブラウザーをターゲットとする場合は、jQuery HTML5 Placeholderと呼ばれるjQueryプラグインを使用して、次のJavaScriptコードを追加するだけで有効にできます。

$('input[placeholder], textarea[placeholder]').placeholder();

これはテキストボックスの透かしと呼ばれ、JavaScriptを介して行われます。

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

またはjQueryを使用する場合は、はるかに優れたアプローチです。

• http://digitalbush.com/projects/watermark-input-plugin/
• またはcode.google.com/p/jquery-watermark

HTML の属性を使用してプレースホルダーを設定できます（ブラウザーサポート）。することができCSSで変更（ブラウザのサポートが限定されているが）。placeholderfont-stylecolor

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クラスを削除して、入力値を変更することができますonfocus/ onblurJavaScriptを使用しました：

<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'}" />

更新：要求された色付けを追加しました。

私はしばらく前に自分のWebサイトにこの解決策を投稿しました。これを使用するには、単一の.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>

GAJAXLibsとjQueryの両方に興味を持っていただければ幸いです。

今では非常に簡単になります。HTMLでは、入力用のプレースホルダー属性を与えることができます要素にます。

例えば

<input type="text" name="fst_name" placeholder="First Name"/>

詳細を確認してください：http : //www.w3schools.com/tags/att_input_placeholder.asp

jQueryユーザーの場合：naspinskiのjQueryリンクが壊れているようですが、次のリンクを試してください。 http

ボーナスとして、無料のjQueryプラグインチュートリアルを入手できます。:)

jQueryプラグインjQuery Watermarkは、トップの回答にリストされているものよりも優れていることがわかりました。なぜ良いのですか？パスワード入力フィールドをサポートするため。また、透かし（または他の属性）の色の設定は.watermark、CSSファイルで参照を作成するのと同じくらい簡単です。

これは「透かし」と呼ばれます。

最初の回答とは異なり、追加の設定を必要としないjQueryプラグインのjQueryウォーターマークを見つけました（フォームを送信する前に、元の回答にも特別な呼び出しが必要です）。

jQuery Form Notifierを使用する -これは最も人気のあるjQueryプラグインの1つであり、ここにある他のjQuery提案のいくつかのバグに悩まされません（たとえば、透かしが保存されるかどうか心配することなく、透かしを自由にスタイルできます）データベース）。

jQuery Watermarkは、フォーム要素で直接単一のCSSスタイルを使用します（透かしに適用されたCSSフォントサイズプロパティもテキストボックスに影響を与えたことに気付きましたが、私が望んでいたものではありません）。jQuery Watermarkのプラスは、テキストをフィールドにドラッグアンドドロップできることです（jQuery Form Notifierではこれが許可されていません）。

他の人（digitalbrush.comにあるもの）によって提案された別のものは、誤って透かしの値をフォームに送信するので、私はそれを強くお勧めします。

背景画像を使用してテキストをレンダリングします。

 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");
        }
    });
});

ボックスに「検索」と表示されている場合は、フォーカスが変更されたときにテキストが削除されます。このようなもの：

<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 type="text" value="Search" onfocus="this.select();" />

「知瀬知」の解法はシンプルで明解です。ページの読み込みの準備ができたときにのみblurの呼び出しを追加するだけで、初期状態が設定されます。

$('input[value="text"]').blur();

次のようなものを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;
}

私は、うまく機能するシンプルな1行のJavaScriptソリューションを使用しています。次に、textboxとtextareaの両方の例を示します。

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

「欠点」は、フィールドの値で何かを行う前に$ _POSTまたはJavaScript検証で検証することだけです。つまり、フィールドの値が「テキスト」ではないことを確認します。

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

シンプルなHTMLの「必須」タグが役立ちます。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

フォームを送信する前、または送信ボタンを押す前に、入力フィールドに入力する必要があることを指定します。 ここに例があります

http://asp.netのユーザーAJAXToolkit