Wie kann ich dafür sorgen, dass ein HTML-Textfeld im leeren Zustand einen Hinweis anzeigt?

Ich möchte, dass das Suchfeld auf meiner Webseite das Wort "Suche" in grauer Kursivschrift anzeigt. Wenn das Feld den Fokus erhält, sollte es wie ein leeres Textfeld aussehen. Wenn bereits Text enthalten ist, sollte der Text normal angezeigt werden (schwarz, nicht kursiv). Dies hilft mir, Unordnung zu vermeiden, indem ich das Etikett entferne.

Übrigens, dies ist eine On-Page- Ajax- Suche, daher gibt es keine Schaltfläche.

Wenn Sie diese Funktion nur für neuere Browser verwenden möchten, können Sie auch die Unterstützung verwenden, die das Platzhalterattribut von HTML 5 bietet :

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

In Ermangelung von Stilen sieht dies in Chrome folgendermaßen aus:

Sie können Demos hier und in HTML5 Placeholder Styling mit CSS ausprobieren .

Überprüfen Sie unbedingt die Browserkompatibilität dieser Funktion . Unterstützung in Firefox wurde in 3.7 hinzugefügt. Chrome ist in Ordnung. Internet Explorer hat nur in 10 Unterstützung hinzugefügt. Wenn Sie auf einen Browser abzielen, der keine Eingabeplatzhalter unterstützt, können Sie ein jQuery-Plugin namens jQuery HTML5 Placeholder verwenden und dann einfach den folgenden JavaScript-Code hinzufügen, um ihn zu aktivieren.

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

Dies wird als Textfeld-Wasserzeichen bezeichnet und erfolgt über JavaScript.

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

oder wenn Sie jQuery verwenden, ein viel besserer Ansatz:

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

Sie können den Platzhalter mithilfe des placeholderAttributs in HTML festlegen ( Browserunterstützung ). Das font-styleund colorkann mit CSS geändert werden (obwohl die Browserunterstützung begrenzt ist).

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 Eingabewert onfocus/ onblurmit 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...'; }">

Geben Sie dann eine Hinweisklasse mit dem gewünschten Stil in Ihrem CSS an, zum Beispiel:

input.hint {
    color: grey;
}

Der beste Weg ist, Ihre JavaScript-Ereignisse mit einer JavaScript-Bibliothek wie jQuery oder YUI zu verbinden und Ihren Code in eine externe .js-Datei zu legen.

Wenn Sie jedoch eine schnelle und schmutzige Lösung wünschen, ist dies 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 : Das angeforderte Farbmaterial wurde hinzugefügt.

Ich habe vor einiger Zeit eine Lösung dafür auf meiner Website veröffentlicht . Um es zu verwenden, importieren Sie eine einzelne .jsDatei:

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

Kommentieren Sie dann alle Eingaben, die Sie mit der CSS-Klasse versehen möchten hintTextbox:

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

Weitere Informationen und Beispiele finden Sie hier .

Hier ist ein Funktionsbeispiel mit dem Google Ajax-Bibliothekscache und etwas jQuery-Magie.

Dies wäre das CSS:

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

Dies wäre der JavaScript-Code:

<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 der 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, es reicht aus, um Sie sowohl für die GAJAXLibs als auch für jQuery zu interessieren.

Jetzt wird es sehr einfach. In HTML können wir das Platzhalterattribut für Eingabeelemente angeben.

z.B

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

Weitere Informationen finden Sie unter: http://www.w3schools.com/tags/att_input_placeholder.asp

Für jQuery-Benutzer: Der jQuery-Link von naspinski scheint defekt zu sein, aber versuchen Sie diesen: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Als Bonus erhalten Sie ein kostenloses Tutorial zum jQuery-Plugin. :) :)

Ich fand das jQuery-Plugin jQuery Watermark besser als das in der oberen Antwort aufgeführte. Warum besser? Weil es Passworteingabefelder unterstützt. Das Festlegen der Farbe des Wasserzeichens (oder anderer Attribute) ist so einfach wie das Erstellen einer .watermarkReferenz in Ihrer CSS-Datei.

Dies wird als "Wasserzeichen" bezeichnet.

Ich habe das jQuery-Plugin jQuery-Wasserzeichen gefunden, für das im Gegensatz zur ersten Antwort keine zusätzliche Einrichtung erforderlich ist (für die ursprüngliche Antwort ist auch ein spezieller Aufruf erforderlich, bevor das Formular gesendet wird).

Verwenden Sie jQuery Form Notifier - es ist eines der beliebtesten jQuery-Plugins und leidet nicht unter den Fehlern, die einige der anderen jQuery-Vorschläge hier aufweisen (z. B. können Sie das Wasserzeichen frei formatieren, ohne sich Sorgen machen zu müssen, ob es im gespeichert wird Datenbank).

jQuery Watermark verwendet einen einzelnen CSS-Stil direkt für die Formularelemente (ich habe festgestellt, dass die auf das Wasserzeichen angewendeten Eigenschaften der CSS-Schriftgröße auch die Textfelder beeinflussen - nicht das, was ich wollte). Das Plus bei jQuery Watermark ist, dass Sie Text per Drag & Drop in Felder ziehen können (jQuery Form Notifier erlaubt dies nicht).

Ein anderer, der von einigen anderen vorgeschlagen wurde (der auf digitalbrush.com), sendet versehentlich den Wasserzeichenwert an Ihr Formular, daher empfehle ich dringend davon ab.

Verwenden Sie ein Hintergrundbild, um den Text zu rendern:

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

Dann müssen Sie nur noch value == 0die richtige Klasse erkennen und anwenden:

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

Und der jQuery-JavaScript-Code sieht folgendermaßen aus:

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

Sie könnten leicht ein Feld mit der Aufschrift "Suchen" haben, und wenn der Fokus darauf geändert wird, wird der Text entfernt. Etwas wie das:

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

Wenn Sie dies tun, verschwindet natürlich der eigene Text des Benutzers, wenn er darauf klickt. Sie möchten also wahrscheinlich etwas Robusteres 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 zum ersten Mal geladen wird, wird im Textfeld die Suche angezeigt, die grau gefärbt ist, wenn Sie dies wünschen.

Wenn das Eingabefeld den Fokus erhält, wählen Sie den gesamten Text im Suchfeld aus, damit der Benutzer einfach mit der Eingabe beginnen kann, wodurch der ausgewählte Text gelöscht wird. Dies funktioniert auch gut, wenn der Benutzer das Suchfeld ein zweites Mal verwenden möchte, da er den vorherigen Text nicht manuell markieren muss, um ihn zu löschen.

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

Ich mag die Lösung von "Knowledge Chikuse" - einfach und klar. Sie müssen nur einen Aufruf zum Verwischen hinzufügen, wenn das Laden der Seite fertig ist, wodurch der Anfangszustand festgelegt wird:

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

Sie möchten onfocus so etwas zuweisen:

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

und dies zu verwischen:

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

(Sie können etwas Klügeres wie eine Framework-Funktion verwenden, um den Klassennamen zu wechseln, wenn Sie möchten.)

Mit einigen CSS wie diesem:

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

Ich verwende eine einfache einzeilige Javascript-Lösung, die hervorragend funktioniert. Hier ist ein Beispiel sowohl für Textbox als auch für Textbereich:

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

Der einzige "Nachteil" besteht darin, bei $ _POST oder in der Javascript-Validierung zu validieren, bevor etwas mit dem Wert des Feldes getan wird. Das heißt, Sie müssen überprüfen, ob der Feldwert nicht "Text" ist.

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

Ein einfaches HTML-Tag "erforderlich" ist nützlich.

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

Es gibt an, dass ein Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet oder die Schaltfläche Senden gesendet wird. Hier ist ein Beispiel

Benutzer AJAXToolkit von http://asp.net