0

I have a text-area where I can write a message. I would like to input text in that text-area with JavaScript.

 <div tabindex="-1" class="_2bXVy">
<div tabindex="-1" class="_3F6QL _2WovP">
<div class="_39LWd" style="visibility: visible">Type a message</div><div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true">

JS code : http://jsfiddle.net/kex1pgLc/3/

2 Answers 2

4

Since <div contenteditable> is not a real <textarea>, you can't edit its value using div.value. Instead, you can edit it using div.textContent and its variants, like div.innerText and div.innerHTML.

If you want to use <div contenteditable> just like <textarea>, I would recommend you to choose <textarea>.

Sign up to request clarification or add additional context in comments.

1 Comment

I can't change the html code, it's not under my control
1

Use innerHTML instead of value.

Because in your code: document.getElementsByClassName("_39LWd")[0] returns div.

document.getElementsByClassName("_39LWd")[0].innerHTML = "exemple text"
<footer tabindex="-1" class="_2jVLL"><div class="_3oju3"><div tabindex="-1" class="_2uQuX" data-tab="4"><button class="_2Fofa"><span data-icon="smiley" class=""><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path opacity=".45" fill="#263238" d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"></path></svg></span></button></div><div tabindex="-1" class="_2bXVy"><div tabindex="-1" class="_3F6QL _2WovP"><div class="_39LWd" style="visibility: visible">Type a message</div><div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true"></div></div></div><div class="_1UWg0"><span><button class="_2SbJ1"><span data-icon="ptt" class=""><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".45" d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg></span></button></span></div></div><div class="_14wwJ"><div class="_1fkhx"><div></div></div></div><span class="_245vA"></span><span class="TSSFW"></span></footer>

EDIT======

If it is the case for the textarea specific then you should use textarea instead of div.

document.getElementById("abc").value = "Hi"
<textarea id="abc" placeholder="type message"> </textarea>

Second EDIT==========

Create dynamic textarea

var textArea = document.createElement("textarea");
var parentDiv = document.getElementsByClassName("abc")[0];

parentDiv.appendChild(textArea);
textArea.placeholder = "Type message";
textArea.value = "Hello";
<div class="abc"></div>

7 Comments

thanks you, but it doesn't add text, it change the "type a message" to the "exemple text"
You should use textarea then
Aah, I thought you only need to add text to the specifically selected className. take a look updated answer.
I can't edit the html code, there Is an id but it's for the whole page, "<div id="main" class="1GX8">"
@ibobo, you can't add value to the div. You just add text or HTML as I posted before. What you can do is. You can create textarea under the specific div id using javascript then. If you can't change HTML
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.