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

Question

Web ページの検索ボックスに「検索」という単語を灰色の斜体で表示したいと考えています。ボックスにフォーカスが置かれると、空のテキスト ボックスのように見えるはずです。すでにテキストが含まれている場合は、テキストが通常どおり (黒、非斜体) で表示されます。こうすることでラベルを剥がすことができ、乱雑になるのを避けることができます。

ところで、これはオンページです アヤックス 検索するため、ボタンはありません。

Answer 1

この機能を新しいブラウザーのみに適用してもよい場合は、HTML 5 によって提供されるサポートを使用することもできます。 プレースホルダー 属性：

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

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

デモを試すことができます ここ そしてで CSS を使用した HTML5 プレースホルダーのスタイル設定.

必ずご確認ください この機能のブラウザ互換性. 。Firefox でのサポートは 3.7 で追加されました。クロムは大丈夫ですよ。Internet Explorer は 10 でのみサポートを追加しました。入力プレースホルダーをサポートしていないブラウザを対象とする場合は、次の jQuery プラグインを使用できます。 jQuery HTML5 プレースホルダー, 次に、次の JavaScript コードを追加して有効にします。

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

Answer 2

これはテキストボックスのウォーターマークとして知られており、JavaScript を介して実行されます。

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

または、jQuery を使用する場合は、より良いアプローチです。

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

Answer 3

設定できるのは、 プレースホルダー を使用して placeholder 属性 HTML (ブラウザのサポート）。の 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">

Answer 4

特別な CSS クラスを追加および削除し、入力値を変更できます。 onfocus/onblur JavaScript を使用すると:

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

Answer 5

最善の方法は、次のような何らかの JavaScript ライブラリを使用して JavaScript イベントを接続することです。 jQuery または ゆい コードを外部 .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'}" />

更新しました:リクエストのあったカラーリングを追加しました。

Answer 6

私が投稿しました 私のウェブサイトでこれを解決する 少し前。これを使用するには、単一のファイルをインポートします .js ファイル：

<script type="text/javascript" src="/hint-textbox.js"></script>

次に、ヒントが必要な入力に CSS クラスで注釈を付けます。 hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

詳しい情報と例が利用可能です ここ.

Answer 7

ここでは、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 の両方に興味を持っていただければ幸いです。

Answer 8

今ではとても簡単になりました。html では次のように指定できます。 プレースホルダー の属性 入力 要素。

例えば

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

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

Answer 9

jQuery ユーザーの場合:naspinski の jQuery リンクは壊れているようですが、これを試してください。http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

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

Answer 10

jQueryプラグインを見つけました jQueryウォーターマーク 一番上の回答に記載されているものよりも優れています。なぜもっと良いのでしょうか？パスワード入力フィールドをサポートしているためです。また、ウォーターマーク (またはその他の属性) の色を設定するのは、 .watermark CSS ファイル内の参照。

Answer 11

これを「ウォーターマーク」といいます。

jQueryプラグインを見つけました jQueryウォーターマーク 最初の回答とは異なり、追加のセットアップは必要ありません (元の回答では、フォームが送信される前に への特別な呼び出しも必要です)。

Answer 12

使用 jQuery フォーム通知機能 - これは最も人気のある jQuery プラグインの 1 つであり、ここで紹介する他の jQuery のいくつかのバグの影響を受けません (たとえば、透かしがデータベースに保存されるかどうかを気にすることなく、自由に透かしのスタイルを設定できます)。

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

他の人が提案しているもの (digitalbrush.com のもの) では、誤ってウォーターマーク値をフォームに送信してしまうため、使用しないことを強くお勧めします。

Answer 13

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

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

Answer 14

ボックスに「検索」という文字を表示し、フォーカスがそこに移動するとテキストが削除されるようにすることが簡単にできます。このようなもの：

<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">

Answer 15

ページが最初に読み込まれるときに、テキスト ボックスに [検索] が表示されます (必要に応じて灰色で表示されます)。

入力ボックスにフォーカスが置かれたら、検索ボックス内のすべてのテキストを選択して、ユーザーが入力を開始できるようにします。これにより、選択したテキストが途中で削除されます。これは、ユーザーが検索ボックスをもう一度使用したい場合にも、前のテキストを手動でハイライトして削除する必要がないため、うまく機能します。

<input type="text" value="Search" onfocus="this.select();" />

Answer 16

「Knowledge Chikuse」のソリューションはシンプルで明快で気に入っています。ページの読み込みの準備ができたときに、blur への呼び出しを追加するだけで初期状態が設定されます。

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

Answer 17

次のようなものを onfocus に割り当てたいとします。

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

そしてこれをオンブラーにします:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(必要に応じて、フレームワーク関数など、もう少し賢いものを使用してクラス名の切り替えを行うこともできます。)

次のような CSS を使用します。

input.placeholder{
    color: gray;
    font-style: italic;
}

Answer 18

$('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">

Answer 19

シンプルな HTML の「必須」タグが便利です。

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

Answer 20

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