用户添加文本后，Javascript 按钮将停止写入 textarea答案

【问题标题】：Javascript button ceases to write to texarea once user has added text用户添加文本后，Javascript 按钮将停止写入 textarea
【发布时间】：2016-12-24 16:10:02
【问题描述】：

我正在尝试制作一个简单的文本编辑框，以便最终可以将文本发布到网站的另一个部分。我正在尝试制作按钮以使文本变为粗体、斜体、添加代码框等（因此insertAdjacentHTML 不是insertAdjacentText）但我决定开始确保我可以将纯文本打印到文本区域。我已经轻松实现了这一点，但现在我的问题变成了如何使按钮在用户向其添加文本后仍然影响文本区域？下面的代码会愉快地输入“hello”，直到你点击 textarea，从那时起它就拒绝了，我不知道为什么。

window.hello = function(textarea) {
  var obj = document.getElementById("text");
  obj.insertAdjacentHTML('beforeend', 'hello');
}

<body>
  <button onclick="hello()">hello</button>
  <form>
    <p></p>
    <textarea id="text"></textarea>
  </form>
</body>

【问题讨论】：

标签： javascript html button textarea

【解决方案1】：

正如您从MDN 中看到的那样，文本区域只能包含字符数据。

这是因为您不能使用 insertAdjacentHTML，而可以使用 value。。 p>

如果您需要以粗体或...添加文本，您可以使用 contenteditable div 元素。

sn-p：

window.helloDiv = function() {
  var obj = document.getElementById("textDiv");
  obj.insertAdjacentHTML('beforeend', 'hello');
};
window.helloTxtArea = function() {
  var obj = document.getElementById("textTxtArea");
  obj.value += 'hello';
}

div {
  width: 300px;
  height: 100px;
  border: 1px;
  border-style: solid;
}

textarea {
  width: 300px;
  height: 100px;
  margin-top: 10px;
}

<button onclick="helloDiv()">helloDiv</button>
<button onclick="helloTxtArea()">helloTextArea</button>

<form>
    <p></p>
    <div id="textDiv" contenteditable="true"></div>
    <textarea id="textTxtArea" contenteditable="true"></textarea>
</form>

【讨论】：

这看起来很到位，很好地解决了这个问题，并且超越了帮助我以后编辑 HTML。谢谢！