How would I change the content of a <textarea>
element with JavaScript?
I want to make it empty.
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:
value Property: Retrieves or sets the text in the entry field of the textArea element.
value DOMString The raw value contained in the control.
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.
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.
If it's jQuery...
$("#myText").val('');
or
document.getElementById('myText').value = '';
Reference: Text Area Object
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>
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>
<textarea>
does not support the value
attribute. Read developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
innerText
which does the same thing.
Dec 6, 2022 at 14:41
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.