Question

我有3个元素：

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

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

例如，如果我输入FOO，所有其他元素将变为＆＃34; FOO＆＃34;。

我尝试使用一些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版本＆lt; < 9

Example

更新元素以显示＆＃34; contentEditable＆＃34;中的实时更改元件

1 个答案:

Example