Comment effacer textarea sur cliquez sur?

Donné un <textarea> avec une valeur par défaut comme suit:

<textarea>Please describe why</textarea>

Comment voulez-vous effacer la valeur par défaut lorsque l'utilisateur clique sur modifier le champ?

Veuillez utiliser le vrai <label>s et n'abusez pas de la valeur par défaut d'agir comme une fausse étiquette. En plus d'être sémantiquement ordures, ce qui provoque un réel problème pour les utilisateurs de lecteurs d'écran puisque la seule information de leur dire quoi mettre dans le champ disparaît lorsque l'élément obtient le focus ... et les lecteurs d'écran ne pas lire le texte dans un champ jusqu'à ce qu'il obtient le focus!

InformationsquelleAutor Karem | 2010-05-06

48

Votre JavaScript:
```
function clearContents(element) {
  element.value = '';
}
```
Et votre code HTML:
```
<textarea onfocus="clearContents(this);">Please describe why</textarea>
```
Je suppose que vous aurez envie de prendre cela un peu plus solide, afin de ne pas essuyer la saisie de l'utilisateur lors de la mise une deuxième fois. Ici sont cinq liées les discussions & articles.

Et voici le (beaucoup mieux) idée que David Dorward se réfère à la dans les commentaires ci-dessus:
```
<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>
```
- L'attribut doit correspondre à un id, un nom! (Sinon, il serait incompatible avec des boutons radio)
- Vous devriez vous débarrasser de la javascript: peu. C'est un label sans goto. developer.mozilla.org/en/Core_JavaScript_1.5_Reference/... Si vous utilisez intrinsèque des attributs d'événement, alors vous devez spécifier la langue utilisée, mais ce résultat est obtenu avec une balise meta, pas une étiquette: w3.org/TR/html4/interact/scripts.html#h-18.2.2.1
- Étrange. La deuxième idée avec un label ne fonctionne pas pour moi.
InformationsquelleAutor Dolph
36

Vous pouvez utiliser l'espace réservé attribut introduit en HTML5:
```
<textarea placeholder="Please describe why"></textarea>
```
Cela permettra de placer votre texte de remplissage en gris qui disparaît automatiquement quand un utilisateur clique sur le champ de texte. En outre, il réapparaîtra si elle perd le focus et la zone de texte est vide.
- C'est HTML5 seulement.
InformationsquelleAutor Gigazelle

C'est votre fichier javascript:

function yourFunction(){
     document.getElementById('yourid').value = "";
};

C'est le fichier html:

    <textarea id="yourid" >
    Your text inside the textarea
    </textarea>
    <button onClick="yourFunction();">
     Your button Name
     </button>

InformationsquelleAutor emcee22

Essayer:

<input name="mytextbox" onfocus="if (this.value=='Please describe why') this.value = ''" type="text" value="Please Describe why">

Ce n'est pas un textarea, donc -1. Cela ne fait que supprimer le texte d'exemple, si +1.

InformationsquelleAutor Paul Kearney - pk

Vous dire que ce genre de textfield?

<input type="text" onblur="if(this.value == '') this.value='SEARCH';" onfocus="if(this.value == 'SEARCH') this.value='';" size="15" value="SEARCH" name="xSearch" id="xSearch">

Ou cette textarea?

<textarea id="usermsg" rows="2" cols="70" onfocus="if(this.value == 'enter your text here') this.value='';" onblur="if(this.value == '') this.value='enter your text here';" >enter your text here</textarea>

Ma version est la compensation uniquement la valeur par défaut. Dolph solution efface tout dans le textfield/textarea, non seulement la valeur par défaut.

InformationsquelleAutor tildy

La meilleure solution ce que je sais jusqu'à présent:

<textarea name="message" onblur="if (this.value == '') {this.value = 'text here';}"   onfocus="if (this.value == 'text here') {this.value = '';}">text here</textarea>

InformationsquelleAutor nmsdvid

<textarea name="post" id="post" onclick="if(this.value == 'Write Something here..............') this.value='';" onblur="if(this.value == '') this.value='Write Something here..............';" >Write Something here..............</textarea>

InformationsquelleAutor Heart

Vous pouvez essayer ce code,

<textarea name="textarea" cols="70" rows="2" class="searchBox" id="textarea" onfocus="if(this.value == 'Please describe why') this.value='';" onblur="if(this.value == '') this.value='Please describe why';">Please describe why</textarea>

InformationsquelleAutor user2967131

0

jQuery attribut val() devrait faire l'affaire.
Vous pouvez faire $('#YourTextareaID').click(function(e) { e.target.value = ''; }).

InformationsquelleAutor WillyMilimo
0

Voici une solution si vous avez des données dynamiques en provenance d'une base de données...

Les 'données' variable représente la base de données.

Si il n'y a pas de données enregistrées pourtant, l'espace réservé affichera à la place.

Une fois que l'utilisateur commence à taper, l'espace réservé disparaissent et ils peuvent alors entrer du texte.

Espérons que cela aide quelqu'un!
```
//If data is NOT saved in the database
if (data == "") {
    var desc_text = "";
    var placeholder = "Please describe why";
//If data IS saved in the database
} else {
    var desc_text = data;
    var placeholder = "";
}

<textarea placeholder="'+placeholder+'">'+desc_text+'</textarea>
```
InformationsquelleAutor Matt
-2
```
<textarea onClick="javascript: this.value='';">Please describe why</textarea>
```
- Cette solution supprime le champ de texte tous les temps l'utilisateur clique dessus.
InformationsquelleAutor user318747

Vous devez vous connecter pour publier un commentaire.