javascript - description - title tags bilder




Wie kann ich eine HTML-Textbox anzeigen lassen, wenn sie leer ist? (14)

Benutzer AJAXToolkit von http://asp.net

Ich möchte das Suchfeld auf meiner Webseite das Wort "Suche" in grau kursiv anzeigen. Wenn das Feld den Fokus erhält, sollte es wie ein leeres Textfeld aussehen. Wenn bereits Text vorhanden ist, sollte der Text normal angezeigt werden (schwarz, nicht-kursiv). Dies wird mir helfen, Durcheinander zu vermeiden, indem ich das Etikett entferne.

BTW, dies ist eine On-Page- Ajax Suche, so dass es keine Schaltfläche hat.


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

Aber wenn Sie eine schnelle 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 : Die gewünschten Farbstoffe wurden hinzugefügt.



Du könntest leicht eine Box "Suche" lesen lassen, wenn der Fokus geändert wurde, muss der Text entfernt werden. Etwas wie das:

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

Wenn Sie das tun, verschwindet natürlich der eigene Text, wenn Sie klicken. Sie möchten 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">

Eine andere Option, wenn Sie diese Funktion nur für neuere Browser verwenden möchten, ist die Verwendung des HTML5- Platzhalterattributs :

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

In Abwesenheit von Stilen sieht das in Chrome so aus:

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

Überprüfen Sie die Browserkompatibilität dieser Funktion . 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 Eingabeplatzhalter nicht unterstützt, können Sie ein jQuery-Plugin mit dem Namen jQuery HTML5 Placeholder verwenden und dann einfach den folgenden JavaScript-Code hinzufügen, um es zu aktivieren.

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


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

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

hintTextbox Sie dann mit der CSS-Klasse hintTextbox alle Eingaben, die Sie mit Hinweisen versehen hintTextbox :

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

Weitere Informationen und ein Beispiel finden Sie hier .


Ich fand das jQuery-Plugin code.google.com/p/jquery-watermark besser als das in der oberen Antwort aufgeführte. Warum besser? Weil es Passwort-Eingabefelder unterstützt. Auch das Festlegen der Farbe des Wasserzeichens (oder anderer Attribute) ist so einfach wie das Erstellen einer .watermark Referenz in Ihrer CSS-Datei.



Sie können den Platzhalter mithilfe des placeholder in HTML ( Browserunterstützung ) festlegen. Die font-style und color können 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 möchten etwas dem onfocus zuweisen:

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

und das zu onblur:

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

(Sie können etwas cleverer, wie eine Framework-Funktion, verwenden, um den Klassenwechsel durchzuführen, wenn Sie möchten.)

Mit einigen CSS wie folgt:

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

Verwenden Sie jQuery Form Notifier - es ist eines der beliebtesten jQuery - Plugins und leidet nicht unter den Bugs, die einige der anderen jQuery - Vorschläge hier tun (zum Beispiel können Sie das Wasserzeichen frei gestalten, ohne sich Gedanken darüber zu machen, ob es gespeichert wird Datenbank).

jQuery Watermark verwendet einen einzelnen CSS-Stil direkt auf den Formularelementen (ich bemerkte, dass CSS-Schriftgrößeneigenschaften, die auf das Wasserzeichen angewendet wurden, auch die Textfelder betrafen - nicht das, was ich wollte). Das Pluszeichen mit jQuery Watermark ist, dass Sie Text in Felder ziehen können (jQuery Form Notifier erlaubt dies nicht).

Ein anderer, der von einigen anderen vorgeschlagen wird (der von digitalbrush.com), wird versehentlich den Wasserzeichenwert an Ihr Formular senden, also empfehle ich dringend dagegen.


Wenn die Seite zum ersten Mal geladen wird, erscheint in der Textbox Suche, die grau dargestellt wird, wenn Sie möchten.

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. Dadurch wird der ausgewählte Text gelöscht. Dies funktioniert auch gut, wenn der Benutzer das Suchfeld ein zweites Mal verwenden möchte, da sie den vorherigen Text nicht manuell markieren müssen, um ihn zu löschen.

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

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






html5