CODEWITHSUNDEEP
javascript
ian
ian

Reputation: 12335

How to change the Content of a <textarea> with JavaScript

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

I want to make it empty.

Upvotes: 234

Views: 456071

Answers (7)

AllanRibas
AllanRibas

Reputation: 1184

I do it like this

const allKeysData = document.getElementById("allKeysData")
const allKeys = document.getElementById('allKeys')

allKeys.addEventListener("click", function() {
  allKeysData.setAttribute("style", "display:block;")
  var parsedJson = JSON.parse(myKeys)
  allKeysData.value = JSON.stringify(parsedJson, null, 4) 
})

allKeysData.addEventListener("input", function(e) {
  allKeysData.setAttribute("style", event.target.value <= 0? "display:none;": "display:block;")
})

var myKeys = '{"key1": "value1", "key2": "value2"}'
<button id="allKeys" type="button" class="btn btn-warning">Get keys</button>
<hr/>
<textarea style="display:none;" rows="5" cols="50" id="allKeysData"></textarea>
<hr/>

Upvotes: -1

Sanan Ali
Sanan Ali

Reputation: 3444

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>

Upvotes: 3

Shrdi
Shrdi

Reputation: 465

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>

Upvotes: 3

TigerTiger
TigerTiger

Reputation: 10806

If it's jQuery...

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

or

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

Reference: Text Area Object

Upvotes: 8

Greg
Greg

Reputation: 321824

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:

Upvotes: 365

Paul
Paul

Reputation: 3112

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.

Upvotes: 11

Aistina
Aistina

Reputation: 12679

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.

Upvotes: 24

Related Questions