更新元素以显示" contentteditable& quot;中的实时变化元素

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

本文关键字：quot 元素 实时 变化 contentteditable 更新 显示      更新时间：2023-09-26

我有三个元素:

<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

您可以尝试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版本中不支持<9

相关文章：