it-swarm.com.de

Wie kann ich festlegen, dass in einem HTML-Textfeld ein leerer Hinweis angezeigt wird?

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. Befindet sich bereits Text darin, sollte dieser normal angezeigt werden (schwarz, nicht kursiv). Dies hilft mir, Unordnung zu vermeiden, indem ich das Etikett entferne.

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

200
Michael L Perry

Wenn Sie diese Funktion nur für neuere Browser nutzen möchten, können Sie auch die Unterstützung der HTML 5-Attribute placeholder verwenden:

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

In Chrome sieht das wie folgt aus:

enter image description here

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

Stellen Sie sicher, dass Browserkompatibilität dieser Funktion markiert ist. Unterstützung in Firefox wurde in 3.7 hinzugefügt. Chrome ist in Ordnung. Internet Explorer hat die Unterstützung nur in 10 hinzugefügt. Wenn Sie einen Browser auswählen, der keine Eingabe-Platzhalter unterstützt, können Sie ein jQuery-Plugin mit dem Namen jQuery HTML5 Placeholder verwenden Fügen Sie einfach den folgenden JavaScript-Code hinzu, um ihn zu aktivieren.

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

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

oder wenn Sie jQuery verwenden, einen viel besseren Ansatz:

91
naspinski

Sie können den Platzhalter mit dem Attribut placeholder in HTML ( Browserunterstützung setzen =). Das font-style und color können mit CSS geändert sein (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">
40
0b10011

Sie können eine spezielle CSS-Klasse hinzufügen und entfernen und den Eingabewert 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...'; }">

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

input.hint {
    color: grey;
}
20
levik

Am besten verkabeln Sie Ihre JavaScript-Ereignisse mit einer Art JavaScript-Bibliothek wie jQuery oder YUI und fügen Ihren Code in ein ein externe .js-Datei.

Aber wenn Sie eine schnelle und schmutzige Lösung suchen, dann 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.

6
Seb Nilsson

Ich habe vor einiger Zeit eine Lösung hierfür auf meiner Website gepostet. Importieren Sie dazu ein einzelnes .js Datei:

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

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

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

Weitere Informationen und Beispiele finden Sie hier .

4
Drew Noakes

Hier ist ein Funktionsbeispiel mit 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.

3
Gustavo Carreno

Jetzt wird es sehr einfach. In HTML können wir das Platzhalter Attribut für Eingabe Elemente 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

3
apm

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 ebenso einfach wie das Erstellen eines .watermark Verweis in Ihrer CSS-Datei.

2
Dustin

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 haben (z Sie können das Wasserzeichen beispielsweise frei gestalten, ohne sich Sorgen machen zu müssen, ob es in der Datenbank gespeichert wird.

jQuery Watermark verwendet einen einzelnen CSS-Stil direkt für die Formularelemente (mir ist aufgefallen, dass sich die auf das Wasserzeichen angewendeten CSS-Schriftgrößeneigenschaften auch auf die Textfelder auswirken - nicht auf das, was ich wollte). Das Plus von jQuery Watermark ist, dass Sie Text in Felder ziehen können (dies ist in jQuery Form Notifier nicht möglich).

Bei einem anderen Vorschlag (der von digitalbrush.com stammt) wird der Wasserzeichenwert versehentlich an Ihr Formular gesendet, daher empfehle ich dringend, ihn nicht zu verwenden.

2

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

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

2
tuomassalo

Dies nennt man "Wasserzeichen".

Ich habe das jQuery-Plugin jQuery-Wasserzeichen gefunden, das im Gegensatz zur ersten Antwort kein zusätzliches Setup erfordert (die ursprüngliche Antwort benötigt ebenfalls einen besonderen Anruf vor dem Absenden des Formulars).

2
elcuco

Sie könnten leicht ein Kästchen "Suchen" anzeigen lassen, wenn der Fokus auf "Suchen" geändert wird und der Text entfernt wird. Etwas wie das:

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

Wenn Sie dies tun, verschwindet der eigene Text des Benutzers, wenn er 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">
1
user14038

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 == 0 und wende die richtige Klasse an:

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

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'

(Wenn Sie möchten, können Sie etwas Clevereres wie eine Framework-Funktion verwenden, um den Klassennamen zu ändern.)

Mit etwas CSS wie diesem:

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

Wenn die Seite zum ersten Mal geladen wird, wird im Textfeld Suchen in grauer Farbe angezeigt, wenn dies gewünscht wird.

Wenn das Eingabefeld den Fokus erhält, wählen Sie den gesamten Text im Suchfeld aus, damit der Benutzer mit der Eingabe beginnen kann. Dadurch wird der ausgewählte Text gelöscht. 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();" />
0
17 of 26

Ich mag die Lösung von "Knowledge Chikuse" - einfach und klar. Es muss nur ein Aufruf zum Weichzeichnen hinzugefügt werden, wenn das Laden der Seite fertig ist, wodurch der Anfangszustand festgelegt wird:

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