Text im HTML-Feld verschwindet, wenn er angeklickt wird?

Question

Ich kann ganz einfach ein Html-Eingabefeld erstellen, in dem bereits Text enthalten ist. Aber wenn der Benutzer auf das Eingabefeld klickt, verschwindet der Text nicht, sondern bleibt dort. Der Benutzer muss dann den Text manuell entfernen, um ihn einzugeben. Wie kann ich ein Eingabefeld erstellen, bei dem der Text verschwindet, wenn der Benutzer auf das Eingabefeld klickt?

Answer 1

Was Sie tun möchten, ist das HTML5-Attribut zu verwenden placeholder mit dem Sie einen Standardwert für Ihr Eingabefeld festlegen können:

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

Damit sollten Sie das erreichen, was Sie sich wünschen. Seien Sie jedoch vorsichtig, da das Platzhalterattribut in Internet Explorer 9 und früheren Versionen nicht unterstützt wird.

Answer 2

Um dies 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

Probieren Sie dies aus.

<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" />

Ich hoffe, das hilft.

Answer 4

Ich denke, das ist die einfache Lösung, die alle Ihre Probleme lösen sollte:

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

Dies ist Ihre Schaltfläche zum Absenden:

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

dann setzen Sie dieses kleine jQuery in eine 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 es brauchen.

Answer 5

Verwenden Sie das Attribut Platzhalter. Der Text verschwindet, wenn der Benutzer anfängt zu tippen. Dies ist ein Beispiel für ein Projekt, an dem ich gerade arbeite:

<div class="" id="search-form">
    <input type="text" name="" value="" class="form-control" placeholder="Search..." >
</div>