Comment changer le contenu d'une <textarea> avec Javascript

139

Comment changer le contenu d'un <textarea>élément avec JavaScript?

Je veux le rendre vide.

javascript

— ian
source

244

Comme ça:

document.getElementById('myTextarea').value = '';

ou comme ça dans jQuery:

$('#myTextarea').val('');

Où tu as

<textarea id="myTextarea" name="something">This text gets removed</textarea>

Pour tous les votes négatifs et non-croyants:

Voici la référence MSDN

value Propriété: récupère ou définit le texte dans le champ de saisie de l'élément textArea.
Voici la référence MDN

value DOMString La valeur brute contenue dans le contrôle.

— Greg
source

Je ne pensais pas que la valeur fonctionnerait car il n'y en a pas. value = dedans mais merci!

— ian

1

ne fonctionne pas dans Internet Explorer sur les appareils mobiles Windows.

— Paul

9

ne fonctionne pas avec chrome v61, la valeur n'affecte pas ce qui se trouve dans la zone de saisie

— Aero Wang

15

Si vous pouvez utiliser jQuery, et je vous recommande vivement de le faire, vous feriez simplement

$('#myTextArea').val('');

Sinon, cela dépend du navigateur. En supposant que vous avez

var myTextArea = document.getElementById('myTextArea');

Dans la plupart des navigateurs, vous faites

myTextArea.innerHTML = '';

Mais dans Firefox, vous faites

myTextArea.innerText = '';

Déterminer le navigateur utilisé par l'utilisateur reste un exercice pour le lecteur. Sauf si vous utilisez jQuery, bien sûr;)

Edit : je reprends ça. On dirait que la prise en charge de .innerHTML sur les zones de texte s'est améliorée. J'ai testé dans Chrome, Firefox et Internet Explorer, tous ont effacé correctement la zone de texte.

Edit 2 : Et je viens de vérifier, si vous utilisez .val ('') dans jQuery, il définit simplement la propriété .value pour textarea. Donc .value devrait être bien.

— Aistina
source

3

.value = ''; fonctionne dans Chrome FF et Safari ... .innerHTML ne fonctionne pas dans Chrome n'a pas testé dans d'autres.

— ian

1

Vous ne devez pas utiliser innerHTML et innerText pour les zones de texte. L'attribut value doit être utilisé. Ainsi, $ ('# myTextArea'). Val ('') ou document.getElementById ('myTextArea'). Value = '' est la meilleure option

— Parth

8

Bien que de nombreuses réponses correctes aient déjà été données, l'approche classique (lire non-DOM) serait comme ceci:

document.forms['yourform']['yourtextarea'].value = 'yourvalue';

où dans le HTML votre zone de texte est imbriquée quelque part dans une forme comme celle-ci:

<form name="yourform">
    <textarea name="yourtextarea" rows="10" cols="60"></textarea>
</form>

Et comme cela se produit, cela fonctionnerait également avec Netscape Navigator 4 et Internet Explorer 3. Et, pas sans importance, Internet Explorer sur les appareils mobiles.

— Paul
source

2

Si c'est Jquery ..

$("#myText").val('');

ou

document.getElementById('myText').value = '';

http://www.hscripts.com/tutorials/javascript/dom/textarea-events.php

— TigreTigre
source

2

mettez la zone de texte dans un formulaire, en les nommant, et utilisez simplement les objets dom facilement, comme ceci:

<body onload="form1.box.value = 'Welcome!'">
  <form name="form1">
    <textarea name="box"></textarea>
  </form>
</body>

— Shrdi
source