使用JavaScript在文本區域中添加文本

Question

我有一個可以在其中寫消息的文本區域。 我想使用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代碼： http ： //jsfiddle.net/kex1pgLc/3/

Answer 1

由於<div contenteditable>不是真正的<textarea> ，因此不能使用div.value編輯其值。 相反，您可以使用div.textContent及其變體（例如div.innerText和div.innerHTML 。

如果要像<textarea>一樣使用<div contenteditable> ，我建議您選擇<textarea> 。

Answer 2

使用innerHTML代替value 。

因為在您的代碼中： document.getElementsByClassName("_39LWd")[0]返回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> 

編輯======

如果是特定於textarea的情況，則應使用textarea而不是div 。

 document.getElementById("abc").value = "Hi" 

 <textarea id="abc" placeholder="type message"> </textarea> 

第二個EDIT ===========

創建動態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>