Update elements to show real-time changes in "contentEditable" element

Question

I have 3 elements:

<h1 class="1" contenteditable="true">ELEMENT</h1>
<h1 class="2">ELEMENT</h1>
<h1 class="3">ELEMENT</h1>

Since the element with class "1" has contenteditable set to true, I need to make sure that they all have the same value and update each other while the content is being edited.

For example, if I were to type in FOO, all the other elements would change to be "FOO".

I tried using some JQuery to do this, but I have had no luck.

$(".1").change(function() {
    $(".2").text($(this).val());
    $(".3").text($(this).val());
});

Any help would be appreciated as I am still new to JQuery and JS.

1. `change` event is not fired for `contenteditable` element. You can use `input` event instead. 2. `
` does not have value in your example - use `$(this).text()` instead. 3. If script is placed before `
`, wrap code with `document.ready`. [Fiddle](http://jsfiddle.net/3f5rpzhr/). — Regent, May 18 '15 at 17:01

score 1 · Accepted Answer · answered May 18 '15 at 16:59

1

You can try on('input', function() { }) With few changes in code

input Occurs when the text content of an element is changed through the user interface.

$(".1").on('input',function() {
    $(".2").text($(this).text()); // set .text() instead .val()
    $(".3").text($(this).text());// set .text() instead .val()
});

However it is not supported in IE version < 9

Example

answered May 18 '15 at 16:59

Dhaval Marthak

17,246
6
46
68

Thanks for the answer! It worked perfectly, I just found out there was another question that answered this so it is marked as a duplicate. – The Only One Around May 18 '15 at 17:05
@TheOnlyOneAround Welcome, I wasn't aware of that, Until i see the first comment. :) – Dhaval Marthak May 18 '15 at 17:12

Update elements to show real-time changes in "contentEditable" element

` does not have value in your example - use `$(this).text()` instead. 3. If script is placed before `

`, wrap code with `document.ready`. [Fiddle](http://jsfiddle.net/3f5rpzhr/).

1 Answers1

Example