Welche Strategie wird für Eingabefeld-Hinweistexte empfohlen (z. B. "Suche" in einem Suchfeld)?

Question

Viele Seiten haben ein Suchfeld, das normalerweise den überlagerten Text "Suche" enthält, der verschwindet, wenn man das Element fokussiert und wieder erscheint, wenn der Fokus verloren geht. Ich bin gespannt, was die Leute als beste Strategie dafür empfehlen.

Die Strategie, die ich verwendet habe, ist das Fokus/Unschärfe Ereignisse des Eingangselementes zu verwenden und den Inhalt zu prüfen, um zu bestimmen, ob der Wert geändert werden soll. In meinem folgenden Beispiel verwende ich jQuery. Nehmen wir ein Beispiel, wo wir ein Eingabeelement haben mit einem id von quick-search, wenn sie leer ich den Text „Suchen“ zeigen, wenn konzentrierte ich den Text entfernen und einen Stil aktualisieren,

$(function() { 
    $("#quick-search").focus(function() { 
    if (this.value === "Search") { 
     $(this).removeClass("quick-search-not-focussed"); 
     this.value = ""; 
    } 
    }).blur(function() { 
    if (this.value === "") { 
     $(this).addClass("quick-search-not-focussed"); 
     this.value = "Search"; 
    } 
    }); 
}) 

Meine quick-search-not-focussed Klasse sieht wie folgt aus:

.quick-search-not-focussed { color: #bbb; } 

Dies funktioniert gut für mich als Suchfelder nur dann wirklich auf Eingabe eingereicht werden können, da es keine Taste ist jedoch einige Szenarien mehr Eingabeelemente mit Eingabetext überschichtet erfordern, was die alternativen Tricks/Techniken sind Sie verwendet haben ? Persönlich mag ich die Verwendung von Bildern in diesem Ansatz nicht.

Answer 1

jQuery placeholder

Tatsächlich gibt es quite a few similar plugins. Der, den ich verlinkt habe, ist gut genug für mich.

Answer 2

Ich habe das Folgende in meinem Code verwendet.

<input id="searchBox" 
     class="search-gray" 
     name="q" tabindex="1" 
     onblur=" if (this.value==''){this.value = 'search...'; this.className = 'search-gray'}" 
     onfocus=" this.className = ''; if (this.value=='search...') {this.value = ''}" 
     type="text" 
     value="search..."> 

<style> 
    .search-gray{color:#c5c5c5;} 
</style> 

EDIT
Hier ist, was Stackoverflow für ihre Suchfeld verwendet

<input name="q" 
     class="textbox" 
     tabindex="1" 
     onfocus="if (this.value=='search') this.value = ''" 
     type="text" 
     maxlength="80" 
     size="28" 
     value="search"> 

Answer 3

ich ähnliche etwas tun in der Regel dazu:

<input type="text" name="email" data-original="Email address" value="Email address" /> 
<input type="text" name="username" data-original="Username" value="Username" /> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input[data-original]').each(function(){ 
      var input = $(this); 
      var original = input.attr('data-original'); 

      input.focus(function(){ 
       if (input.val() == original) 
        input.addClass('focused').val(''); 
      }); 
      input.blur(function(){ 
       if (input.val() == '') 
        input.removeClass('focused').val(original); 
      }); 
     }); 
    }); 
</script> 

Dies ist das gleiche wie Ihr Ansatz außer mit dem Vorteil, dass Sie Ihren Code nicht für jedes Feld wiederholen müssen; Stattdessen können Sie einfach data-original auf Ihren Feldern angeben und es wird Ihnen gut gehen.

Answer 4

FWIW, Webkit-Browser direkt ein placeholder Attribut auf <input> Tags unterstützen:

​<input placeholder='enter something' />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 5

Werfen Sie einen Blick auf diese: http://fuelyourcoding.com/scripts/infield/

Sein unterscheidet sich von den anderen hier, dass es ein wenig mehr verwendbar. Die Beschriftung wird im Feldfokus ausgeblendet und verschwindet erst, wenn Sie mit der Eingabe beginnen.

und seine unauffällig.