Wie kann ich ein HTML-Textfeld einen Hinweis zeigen, wenn sie leer sind?

Question

Ich mag das Suchfeld auf meiner Web-Seite das Wort „Suche“ in grau und kursiv angezeigt werden soll. Wenn das Feld den Fokus erhält, sollte es wie ein leeres Textfeld suchen. Wenn es Text ist schon drin, sollte es den Text angezeigt werden normalerweise (schwarz, nicht-kursiv). Das wird mir helfen Unordnung zu vermeiden, indem das Etikett zu entfernen.

BTW, ist dies eine auf-Seite Ajax suchen, so hat es keine Taste.

Answer 1

Eine weitere Option, wenn Sie glücklich sind diese Funktion nur für neueren Browser, ist die Unterstützung von HTML 5 nutzen Platzhalter Attribut:

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

In Abwesenheit von irgendwelchen Arten, in Chrome das wie folgt aussieht:

Sie können versuchen, Demos aus hier und in HTML5 Platzhalter Styling mit CSS .

Seien Sie sicher, dass die Browser-Kompatibilität dieser Funktion zu überprüfen. Unterstützung in Firefox wurde in 3.7 hinzugefügt. Chrome ist in Ordnung. Internet Explorer hinzugefügt nur Unterstützung in 10. Wenn Sie einen Browser ausrichten, die keine Eingabe Platzhalter nicht unterstützt, können Sie ein jQuery-Plugin

Answer 2

Das ist als Textwasserzeichen bekannt, und es wird über JavaScript getan.

• http://naspinski.net/ Post / Text-Eingabe-Wasserzeichen-mit-Javascript- (IE-kompatibel) aspx

oder wenn Sie jQuery, ein viel besserer Ansatz:

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

Sie können den Platzhalter mit dem placeholder Attribut in HTML ( Browser-Unterstützung ). Die font-style und color können mit CSS geändert (obwohl Browser-Unterstützung ist begrenzt).

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

Sie können eine spezielle CSS-Klasse hinzufügen und entfernen und den Eingangswert onfocus / onblur mit JavaScript ändern:

<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...'; }">

Dann geben Sie einen Hinweis Klasse mit dem Styling Sie in Ihrem CSS wollen zum Beispiel:

input.hint {
    color: grey;
}

Der beste Weg ist Ihre JavaScript-Ereignisse mit einer Art von JavaScript-Bibliothek verkabeln wie jQuery oder YUI und Ihren Code in einer externen Js-Datei setzen.

Aber wenn Sie eine schnelle und unsaubere Lösung wollen dies ist Ihre Inline-HTML-Lösung:

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

Aktualisiert :. Hinzugefügt wurde die angeforderte Färbung-stuff

I posted eine Lösung für diese auf meiner Website vor einiger Zeit. Um sie zu verwenden, importieren Sie eine einzelne .js-Datei:

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

Dann mit Anmerkungen versehen, was Eingänge Sie Hinweise mit der CSS-Klasse hintTextbox haben wollen:

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

Weitere Informationen und Beispiel sind verfügbar hier .

Hier ist ein funktionales Beispiel mit Google Ajax Library-Cache und einig jQuery Magie.

Dies wäre der CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Dies würde würde den JavaScript-Code sein:

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

Und das wäre die 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>

Ich hoffe, dass es genug ist, der Sie interessiert, um sowohl die GAJAXLibs und in jQuery.

Jetzt wird es sehr einfach. In HTML können wir die Platzhalter geben Attribut für input -Elemente.

z.

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

Check für weitere Informationen: http://www.w3schools.com/tags/att_input_placeholder.asp

Für jQuery Benutzer: naspinski jQuery Link gebrochen zu sein scheint, aber versuchen, diese: http://remysharp.com/2007/01/25 / jquery-Tutorial-Text-Box-Hinweise /

Sie erhalten eine kostenlose jQuery-Plugin Tutorial als Bonus. :)

Ich fand die jQuery-Plugin jQuery Wasserzeichen besser als die in der oberen Antwort aufgeführt ist. Warum besser? Weil es unterstützt Passwort-Eingabefelder. Auch die Farbe der Wasserzeichen-Einstellung (oder anderer Attribute) ist so einfach wie ein .watermark Verweis in der CSS-Datei zu erstellen.

Dies wird als "Wasserzeichen".

fand ich die jQuery-Plugin jQuery Wasserzeichen die , im Gegensatz zu der ersten Antwort, keine zusätzliche Einrichtung erforderlich (die ursprüngliche Antwort muss auch einen speziellen Aufruf, bevor das Formular abgeschickt wird).

Verwenden Sie jQuery Formular Notifier - eines der beliebtesten jQuery Plugins und leidet nicht an den Fehlern einige der anderen jQuery Vorschläge hier tun (zum Beispiel können Sie frei, das Wasserzeichen Stil, ohne sich Sorgen, wenn es auf die Datenbank erhalten gespeichert).

jQuery Wasserzeichen verwenden einen einzelnen CSS-Style direkt auf den Formelementen (Ich bemerkte, dass CSS font-size Eigenschaften auf das Wasserzeichen angewandt auch die Textfelder betroffen - nicht das, was ich wollte). Das Plus mit jQuery Wasserzeichen ist Sie per Drag & Drop können Text in Felder (jQuery Formular Notifier dies nicht zulässt).

Ein weiterer von einigen anderen (die bei digitalbrush.com) vorgeschlagen, wird das Wasserzeichen den Wert Ihrer Form versehentlich einreichen, so empfehle ich dagegen.

ein Hintergrundbild verwenden, den Text zu machen:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Dann alles, was Sie tun müssen, ist value == 0 zu erkennen und die richtige Klasse gelten:

 <input class="foo fooempty" value="" type="text" name="bar" />

Und der jQuery JavaScript-Code sieht wie folgt aus:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

könnten Sie haben einfach eine Box lesen „Suchen“, dann, wenn der Fokus darauf haben der Text entfernt werden geändert wird. So etwas wie folgt aus:

<input onfocus="this.value=''" type="text" value="Search" />

Natürlich, wenn Sie tun, dass der Text des Benutzers verschwindet, wenn sie klicken. So möchten Sie wahrscheinlich etwas robuster verwenden:

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

Wenn die Seite geladen wird, suchen Sie im Textfeld angezeigt haben, grau gefärbt, wenn Sie es wollen.

Wenn das Eingabefeld den Fokus erhält, wählen Sie den gesamten Text in das Suchfeld ein, so dass der Benutzer einfach mit der Eingabe beginnen, die den markierten Text in dem Prozess gelöscht. Dies wird auch gut funktionieren, wenn der Benutzer wünscht, ein zweites Mal Box die Suche zu verwenden, da sie nicht manuell den vorherigen Text haben zu markieren, es zu löschen.

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

Ich mag die Lösung von „Wissen Chikuse“ - einfach und klar. Es muß nur einen Anruf hinzuzufügen, zu verwischen, wenn die Seite geladen ist bereit, das den Anfangszustand gesetzt wird:

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

Sie wollen etwas zu onfocus zuweisen:

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

und dies onblur:

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

(Sie können etwas ein bisschen cleverer verwenden, wie eine Rahmenfunktion, die Klassennamen Umschalten zu tun, wenn Sie wollen.)

Mit etwas CSS wie folgt aus:

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

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

Einfache Html 'erforderlich' Tag ist nützlich.

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

User AJAXToolkit von http://asp.net

                         

Answer 3

Das ist als Textwasserzeichen bekannt, und es wird über JavaScript getan.

• http://naspinski.net/ Post / Text-Eingabe-Wasserzeichen-mit-Javascript- (IE-kompatibel) aspx

oder wenn Sie jQuery, ein viel besserer Ansatz:

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

Answer 4

Sie können den Platzhalter mit dem placeholder Attribut in HTML ( Browser-Unterstützung ). Die font-style und color können mit CSS geändert (obwohl Browser-Unterstützung ist begrenzt).

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 5

Sie können eine spezielle CSS-Klasse hinzufügen und entfernen und den Eingangswert onfocus / onblur mit JavaScript ändern:

<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...'; }">

Dann geben Sie einen Hinweis Klasse mit dem Styling Sie in Ihrem CSS wollen zum Beispiel:

input.hint {
    color: grey;
}

Answer 6

Der beste Weg ist Ihre JavaScript-Ereignisse mit einer Art von JavaScript-Bibliothek verkabeln wie jQuery oder YUI und Ihren Code in einer externen Js-Datei setzen.

Aber wenn Sie eine schnelle und unsaubere Lösung wollen dies ist Ihre Inline-HTML-Lösung:

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

Aktualisiert :. Hinzugefügt wurde die angeforderte Färbung-stuff

Answer 7

I posted eine Lösung für diese auf meiner Website vor einiger Zeit. Um sie zu verwenden, importieren Sie eine einzelne .js-Datei:

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

Dann mit Anmerkungen versehen, was Eingänge Sie Hinweise mit der CSS-Klasse hintTextbox haben wollen:

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

Weitere Informationen und Beispiel sind verfügbar hier .

Answer 8

Hier ist ein funktionales Beispiel mit Google Ajax Library-Cache und einig jQuery Magie.

Dies wäre der CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Dies würde würde den JavaScript-Code sein:

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

Und das wäre die 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>

Ich hoffe, dass es genug ist, der Sie interessiert, um sowohl die GAJAXLibs und in jQuery.

Answer 9

Jetzt wird es sehr einfach. In HTML können wir die Platzhalter geben Attribut für input -Elemente.

z.

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

Check für weitere Informationen: http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 10

Für jQuery Benutzer: naspinski jQuery Link gebrochen zu sein scheint, aber versuchen, diese: http://remysharp.com/2007/01/25 / jquery-Tutorial-Text-Box-Hinweise /

Sie erhalten eine kostenlose jQuery-Plugin Tutorial als Bonus. :)

Answer 11

Ich fand die jQuery-Plugin jQuery Wasserzeichen besser als die in der oberen Antwort aufgeführt ist. Warum besser? Weil es unterstützt Passwort-Eingabefelder. Auch die Farbe der Wasserzeichen-Einstellung (oder anderer Attribute) ist so einfach wie ein .watermark Verweis in der CSS-Datei zu erstellen.

Answer 12

Dies wird als "Wasserzeichen".

fand ich die jQuery-Plugin jQuery Wasserzeichen die , im Gegensatz zu der ersten Antwort, keine zusätzliche Einrichtung erforderlich (die ursprüngliche Antwort muss auch einen speziellen Aufruf, bevor das Formular abgeschickt wird).

Answer 13

Verwenden Sie jQuery Formular Notifier - eines der beliebtesten jQuery Plugins und leidet nicht an den Fehlern einige der anderen jQuery Vorschläge hier tun (zum Beispiel können Sie frei, das Wasserzeichen Stil, ohne sich Sorgen, wenn es auf die Datenbank erhalten gespeichert).

jQuery Wasserzeichen verwenden einen einzelnen CSS-Style direkt auf den Formelementen (Ich bemerkte, dass CSS font-size Eigenschaften auf das Wasserzeichen angewandt auch die Textfelder betroffen - nicht das, was ich wollte). Das Plus mit jQuery Wasserzeichen ist Sie per Drag & Drop können Text in Felder (jQuery Formular Notifier dies nicht zulässt).

Ein weiterer von einigen anderen (die bei digitalbrush.com) vorgeschlagen, wird das Wasserzeichen den Wert Ihrer Form versehentlich einreichen, so empfehle ich dagegen.

Answer 14

ein Hintergrundbild verwenden, den Text zu machen:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Dann alles, was Sie tun müssen, ist value == 0 zu erkennen und die richtige Klasse gelten:

 <input class="foo fooempty" value="" type="text" name="bar" />

Und der jQuery JavaScript-Code sieht wie folgt aus:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Answer 15

könnten Sie haben einfach eine Box lesen „Suchen“, dann, wenn der Fokus darauf haben der Text entfernt werden geändert wird. So etwas wie folgt aus:

<input onfocus="this.value=''" type="text" value="Search" />

Natürlich, wenn Sie tun, dass der Text des Benutzers verschwindet, wenn sie klicken. So möchten Sie wahrscheinlich etwas robuster verwenden:

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

Wenn die Seite geladen wird, suchen Sie im Textfeld angezeigt haben, grau gefärbt, wenn Sie es wollen.

Wenn das Eingabefeld den Fokus erhält, wählen Sie den gesamten Text in das Suchfeld ein, so dass der Benutzer einfach mit der Eingabe beginnen, die den markierten Text in dem Prozess gelöscht. Dies wird auch gut funktionieren, wenn der Benutzer wünscht, ein zweites Mal Box die Suche zu verwenden, da sie nicht manuell den vorherigen Text haben zu markieren, es zu löschen.

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

Answer 17

Ich mag die Lösung von „Wissen Chikuse“ - einfach und klar. Es muß nur einen Anruf hinzuzufügen, zu verwischen, wenn die Seite geladen ist bereit, das den Anfangszustand gesetzt wird:

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

Answer 18

Sie wollen etwas zu onfocus zuweisen:

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

und dies onblur:

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

(Sie können etwas ein bisschen cleverer verwenden, wie eine Rahmenfunktion, die Klassennamen Umschalten zu tun, wenn Sie wollen.)

Mit etwas CSS wie folgt aus:

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

Answer 19

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

Einfache Html 'erforderlich' Tag ist nützlich.

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

Answer 21

User AJAXToolkit von http://asp.net