Using keyup function without changing editing text

Question

I am using javascript function keyup with editable div and text input filed use for add text into editable div so my code work fine but recently i am add CKeditor plugin for editing text.

for example if i set text in input field keyup function work and these text set into editable div now i want to use Ckeditor for customizing after customization if i want to change text with input field than editing lost and return on default style.

Javasacript

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

HTML

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

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

Answer 1

Try using the following:

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

Online example

EDIT 1:

If you want to make sure that the initial input is also updated upon change of div , you should try the following:

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

Try clicking on the button or modifying div's content via Firebug, for example and see how input is also changed.

I wouldn't use keyup in your case but changed it as such upon your request.

Online example