web-dev-qa-db-fra.com

Comment effacer textarea sur click?

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

<textarea>Please describe why</textarea>

Comment effacez-vous la valeur par défaut lorsque l'utilisateur clique pour modifier le champ?

javascripthtmltextarea
43
Karem

Votre JavaScript:

function clearContents(element) {
  element.value = '';
}

Et votre HTML:

<textarea onfocus="clearContents(this);">Please describe why</textarea>

Je suppose que vous voudrez rendre cela un peu plus robuste, afin de ne pas effacer les entrées de l'utilisateur lors de la mise au point une seconde fois. Icisontcinqliésdiscussions & articles .

Et voici la (bien meilleure) idée à laquelle David Dorward fait référence dans les commentaires ci-dessus:

<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>
49
Dolph

Vous pouvez utiliser l'attribut d'espace réservé introduit dans HTML5:

<textarea placeholder="Please describe why"></textarea>

Cela placera votre texte de remplissage en gris qui disparaîtra automatiquement lorsqu'un utilisateur clique sur le champ de texte. En outre, il réapparaît s'il perd le focus et que la zone de texte est vide.

36
Gigazelle

Ceci 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>
8
emcee22

Essayer:

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

Voulez-vous dire comme ça pour 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 ceci pour 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>
5
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>
1
nmsdvid

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

0
WillyMilimo

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>
0
user2967131

Voici une solution si vous avez des données dynamiques provenant d'une base de données ...
La variable 'data' représente les données de la base de données.
S'il n'y a pas encore de données sauvegardées, l'espace réservé sera affiché à la place.
Une fois que l'utilisateur commence à taper, l'espace réservé disparaît et il peut ensuite saisir du texte.

J'espère que ça 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>
0
Matt
<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>
0
Heart