Wie Ein-/Ausblenden des Eingabewerts im Fokus?

Question

Ich sehe dies überall im Web, aber ich frage mich, ob jemand den JavaScript-Code für die einfachste Möglichkeit hat, den Eingabewert für die Unschärfe anzuzeigen, sich aber im Fokus zu verstecken.

Answer 1

Dies ist, was ich auf my blog verwende. Geh einfach hin und sieh dir den Quellcode an.

function displaySearchText(text){ 
    var searchField = document.getElementById('searchField'); 
    if(searchField != null) 
     searchField.value = text; 
} 

Ihre Eingabefeld wie folgt aussehen sollte:

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/> 

Answer 2

Der einfachste Ansatz, den ich kenne ist die folgende:

<input 
    name="tb" 
    type="text" 
    value="some text" 
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''" /> 

Answer 3

Wenn Sie nicht über gültige HTML-Pflege, Sie verwenden das Attribut placeholder. Es funktioniert bei einer Safari sofort und Sie können einige unauffällige JS hinzufügen, um dieses Verhalten in anderen Browsern nachzuahmen.

More reading:

• http://www.beyondstandards.com/archives/input-placeholders/ (JS Implementierung)
• http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

und Google. ;-)

Die Lösung ähnelt der von Josh Stodola, aber es ist flexibler und universeller.

Answer 4

Diese immer für mich gearbeitet:

<input 
    type="text" 
    value="Name:" 
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''" 
/> 

Answer 5

ziehe ich jQuery Weg:

$(function(){ 
    /* Hide form input values on focus*/ 
    $('input:text').each(function(){ 
     var txtval = $(this).val(); 
     $(this).focus(function(){ 
      if($(this).val() == txtval){ 
       $(this).val('') 
      } 
     }); 
     $(this).blur(function(){ 
      if($(this).val() == ""){ 
       $(this).val(txtval); 
      } 
     }); 
    }); 
}); 

Es Hide Form Input Values On Focus With jQuery von Zack Perdue modifiziert wird.

Answer 6

Da dies immer noch auf Google auftaucht, möchte ich darauf hinweisen, dass Sie mit HTML 5 das Platzhalterattribut mit einer Eingabe verwenden können, um dies in einem Stück HTML zu erreichen.

<input type="text" id="myinput" placeholder="search..." /> 

Platzhalter ist jetzt in modernen Browsern Standard, so dass dies wirklich würde die bevorzugte Methode sein.

Answer 7

Für alle Browser:

<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" /> 

Für neueste Version des Browser:

<input type="text" name="inputname" placeholder="Your value" />