更新元素以显示“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 在通过用户界面更改元素的文本内容时发生。

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

但 IE 版本

不支持

Example