web-dev-qa-db-fra.com

Le texte dans le champ HTML disparaîtra lorsque vous cliquez dessus?

Je peux facilement créer un champ de saisie html contenant déjà du texte. Mais lorsque l'utilisateur clique sur le champ de saisie, le texte ne disparaît pas mais y reste. L'utilisateur doit ensuite supprimer manuellement le texte à saisir. Comment puis-je créer un champ de saisie où lorsque l'utilisateur clique sur la zone de champ de saisie le texte disparaît ensuite?

javascripthtmluser-interfacedom-events
34
Zach Smith

Ce que vous voulez faire, c'est utiliser l'attribut HTML5 placeholder qui vous permet de définir une valeur par défaut pour votre zone de saisie:

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

Cela devrait atteindre ce que vous recherchez. Cependant, soyez prudent car l'attribut d'espace réservé n'est pas pris en charge dans Internet Explorer 9 et les versions antérieures.

153
Nayish

Pour ce faire, vous pouvez utiliser les deux événements onfocus et onblur:

<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;" />
21
BitDrink

C'est aussi simple que je pense que la solution qui devrait résoudre tous vos problèmes:

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

Voici votre bouton d'envoi:

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

puis mettez ce petit jQuery dans un fichier js:

//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 = ''; 
    }
});

Et cela fonctionne également dans les anciens navigateurs. De plus, il peut facilement être converti en javascript normal si vous en avez besoin.

5
Maurizio In denmark

Aussi simple que cela: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">

4
Bjössi Sveinbjörn Grétarsson

essayez celui-ci.

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

j'espère que cela t'aides.

4
douglas olupoit

Que diriez-vous quelque chose comme ça?

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

Cela disparaîtra lors de la mise au point la première fois, mais ne s'effacera pas lors des mises au point suivantes une fois que l'utilisateur a entré sa valeur, lorsqu'il est laissé vide, il restaure la valeur donnée.

3
mecsco

Utilisez l'attribut d'espace réservé. Le texte disparaît lorsque l'utilisateur commence à taper. Voici un exemple de projet sur lequel je travaille:

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