202

How would I change the content of a <textarea> element with JavaScript?

I want to make it empty.

1

6 Answers 6

329

Like this:

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

or like this in jQuery:

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

Where you have

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

For all the downvoters and non-believers:

4
  • Didn't think value would work cause there is no. value= in it but thanks!
    – ian
    Oct 29, 2009 at 9:14
  • 1
    does not work in internet explorer on windows mobile devices.
    – Paul
    Oct 29, 2009 at 10:04
  • 26
    doesn't work with chrome v61, the value doesn't effect that's in the input box
    – Aero Wang
    May 30, 2017 at 12:06
  • That's kinda weird, but sadly it seems true. Do you know why @AeroWang? / edit: typo Aug 30, 2021 at 4:58
23

If you can use jQuery, and I highly recommend you do, you would simply do

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

Otherwise, it is browser dependent. Assuming you have

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

In most browsers you do

myTextArea.innerHTML = '';

But in Firefox, you do

myTextArea.innerText = '';

Figuring out what browser the user is using is left as an exercise for the reader. Unless you use jQuery, of course ;)

Edit: I take that back. Looks like support for .innerHTML on textarea's has improved. I tested in Chrome, Firefox and Internet Explorer, all of them cleared the textarea correctly.

Edit 2: And I just checked, if you use .val('') in jQuery, it just sets the .value property for textarea's. So .value should be fine.

2
  • 4
    .value = ''; works in Chrome FF and Safari... .innerHTML does not work in Chrome did not test in others.
    – ian
    Oct 29, 2009 at 9:23
  • 1
    You should not use innerHTML and innerText for textareas. The value attribute should be used. So, $('#myTextArea').val('') or document.getElementById('myTextArea').value = '' is the best option
    – Parth
    Feb 2, 2017 at 8:45
9

Although many correct answers have already been given, the classical (read non-DOM) approach would be like this:

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

where in the HTML your textarea is nested somewhere in a form like this:

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

And as it happens, that would work with Netscape Navigator 4 and Internet Explorer 3 too. And, not unimportant, Internet Explorer on mobile devices.

6

If it's jQuery...

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

or

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

Reference: Text Area Object

0
2

Put the textarea to a form, naming them, and just use the DOM objects easily, like this:

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

Here is a simple vanilla JS example that changes the textarea content on a button click.

const button = document.querySelector("#button");
const messageBox = document.querySelector("#message");
button.addEventListener("click", ()=>{
messageBox.innerText = "Please type your message here."
});
 <h1>TextArea Examplw with JavaScript</h1>
    <textarea id="message"></textarea>
    <button id="button">Click to Change</button>

3
  • 2
    As of today, <textarea> does not support the value attribute. Read developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
    – Al Po
    Dec 6, 2022 at 11:08
  • @AlPo Thanks. I have updated the answer by using innerText which does the same thing.
    – Sanan Ali
    Dec 6, 2022 at 14:41
  • 1
    innerText removes all of the node's children and replaces them with a single text node with the given string value. In this particular case an empty string is a perfect answer to the question. However, it is worth mentioning that HTMLTextAreaElement interface does have a value attribute.
    – Al Po
    Dec 6, 2022 at 20:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.