Text im HTML-Feld verschwindet beim Klicken?

Question

Ich kann leicht ein HTML-Eingabefeld erstellen, das bereits Text enthält. Wenn der Benutzer jedoch auf das Eingabefeld klickt, verschwindet der Text nicht, sondern bleibt dort. Der Benutzer muss dann den zu typierenden Text manuell entfernen. Wie kann ich ein Eingabefeld erstellen, in dem der Text verschwindet, wenn der Benutzer auf das Eingabefeld klickt?

Answer 1

Wie wäre es mit so etwas?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

Dies wird klar auf das erste Mal konzentriert, aber dann wird bei zukünftigen Schwerpunkte nicht klar, nachdem der Benutzer den Wert eingibt, wenn leer gelassen stellt sie wieder her den angegebenen Wert.

Answer 2

Um das zu erreichen, können Sie die beiden Ereignisse onfocus und onblur verwenden:

<input type="text" name="theName" value="DefaultValue" 
    onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}" 
    onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}" 
    style="color:#BBB;" /> 

Answer 3

Was Sie wollen, dass die HTML5 placeholder Attribut ist zu tun, verwenden, die Sie einen Standardwert für Ihr Eingabefeld einstellen kann:

<input type="text" name="inputBox" placeholder="enter your text here">

Dies sollte erreichen, was Sie suchen. Seien Sie jedoch vorsichtig, da das Platzhalterattribut in Internet Explorer 9 und früheren Versionen nicht unterstützt wird.

Answer 4

versuchen Sie dieses eine heraus.

<label for="user">user</label> 
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"  
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" /> 

hoffe das hilft.

Answer 5

Dies ist so einfach ich die Lösung denken, die alle Ihre Probleme lösen sollte:

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE"> 

Das ist Ihre Submit-Button:

<input type="submit" id= "submitBtn" value="Submit"> 

dann setzen diese kleine jQuery in einer js-Datei:

//this will submit only if the value is not default 
$("#submitBtn").click(function() { 
    if ($("#valueText").val() === "ENTER VALUE") 
    { 
     alert("please insert a valid value"); 
     return false; 
    } 
}); 

//this will put default value if the field is empty 
$("#valueText").blur(function() { 
    if(this.value == ''){ 
     this.value = 'ENTER VALUE'; 
    } 
}); 

//this will empty the field is the value is the default one 
$("#valueText").focus(function() { 
    if (this.value == 'ENTER VALUE') { 
     this.value = ''; 
    } 
}); 

Und es funktioniert auch in älteren Browsern. Außerdem kann es leicht in normales Javascript umgewandelt werden, wenn Sie brauchen.

Answer 6

einfach: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">