使用javascript传递可编辑的h2元素值以形成textarea

Question

我有一个H2 元素： <h2 contenteditable="true" class="input">This is a text</h2>

我有textarea 元素： <textarea class="output">This is another</textarea>

现在H2 元素是可编辑的，如您所见，我希望他的内容（用户将输入的内容）实时更新输入元素值。

我怎样才能？ （使用javascript）

Answer 1

如果您使用的是 Jquery，则可以使用以下 jsfiddle

jquery https://jsfiddle.net/kd9jLcs6/1/

它使用 keyup 函数将 h2 的内部文本更新为文本区域的内部文本

Answer 2

如果您需要纯JavaScript解决方案，只需使用HTMLElement: input 事件，其中规定：

该事件还适用于启用了contenteditable元素，以及打开designMode时的任何元素。 在contenteditable和designMode的情况下，事件目标是编辑主机。 如果这些属性适用于多个元素，则编辑宿主是最近的父元素不可编辑的祖先元素。

由于您的h2元素具有值为true contenteditable属性，因此它应该可以工作。

请尝试以下操作：

 const h2 = document.getElementsByClassName('input')[0]; const textarea = document.getElementsByClassName('output')[0]; h2.addEventListener('input', e => textarea.value = e.target.innerHTML);

 <h2 contenteditable="true" class="input">This is a text</h2> <textarea class="output">This is another</textarea>

我希望这有帮助！