使用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>

我希望這有幫助！