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

Question

I have an H2 element : <h2 contenteditable="true" class="input">This is a text</h2>

And I have textarea element : <textarea class="output">This is another</textarea>

Now the H2 element is editable as you see and i want his content (what ever the user will type) to update the input element value live.

How can i? (using javascript)

Answer 1

If you're using Jquery you could use the following jsfiddle

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

Which uses the keyup function to update the h2's innertext with that of the text area

Answer 2

If you need pure JavaScript solution just use HTMLElement: input event which states:

The event also applies to elements with contenteditable enabled, and to any element when designMode is turned on. In the case of contenteditable and designMode , the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

As your h2 element has contenteditable attribute with the value true , it should work.

Try the following:

 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>

I hope this helps!