javascript - 使用keyup功能而不改变编辑文本

Question

我正在使用带有可编辑 div 的 javascript 函数 keyup 和文本输入字段，用于将文本添加到可编辑 div 中，因此我的代码工作正常，但最近我添加了用于编辑文本的 CKeditor 插件。

例如，如果我在输入字段 keyup 函数中设置文本，并且这些文本设置为可编辑 div，现在我想使用 Ckeditor 在自定义后进行自定义，如果我想使用输入字段更改文本而不是编辑丢失并返回默认样式。

Java脚本

$('#input1').keyup(function () {
    txt = $('#input1').val();
    $('#field1').text(txt);
});

HTML

<input type="text" id="input1">

<div id="field1" contentEditable='true'; ></div>

Answer 1

尝试使用以下内容:

$(document).on("keydown", "#input1", function() {
    txt = $('#input1').val();
    $('#field1').text(txt);
});

Online example

编辑1:

如果您想确保初始 input 也随着 div 的更改而更新，您应该尝试以下操作:

$(document).on("DOMSubtreeModified", "#field1", function() {
   $('#input1').val($('#field1').text()); 
});

例如，尝试单击按钮或通过 Firebug 修改 div's 内容，看看 input 是如何更改的。

在您的情况下，我不会使用 keyup，但根据您的要求进行了更改。

Online example