javascript - 更新元素以显示 "contentEditable"元素的实时变化

Question

我有 3 个元素:

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

由于类“1”的元素有 contenteditable设置为true ，我需要确保它们都具有相同的值，并在编辑内容时相互更新。

例如，如果我输入 FOO，所有其他元素都会更改为“FOO”。

我尝试使用一些 JQuery 来做到这一点，但我没有运气。

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

任何帮助将不胜感激，因为我对 JQuery 和 JS 还很陌生。

Answer 1

您可以尝试 on('input', function() { }) 只需对代码进行少量更改

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()
});

但是IE版本<9不支持

Example