Simulate keyup () in a text box on keyup () of another contenteditable div

Question

Here is the scenario:

• I have editable content div. I also have textarea on which there are some things happening on .keyup ().
• I need to on keyup () the contents of the editable div, copy the text entered in the contenteditable div into the text box, and then fire the keyup event in the text box through jquery.

What I have achieved so far:

I found that keyup () does not start until there is a physical click on the text box. Initially, if I do .trigger ("keyup") in textarea, nothing happens. but if I click on the text field, enter something in the contenteditable div and do .trigger ('keyup') in textarea, the keyup textarea event will fire and everything works like a charm.

Any directions would be highly appreciated. Thanks in advance.

Answer 1

Not sure what the problem is. This works great:

var textarea=$('#editable_textarea');
var div=$('#editable_div');

div.on('keyup',function()
{
    textarea.text($(this).text()).trigger('keyup');
});

textarea.on('keyup',function()
{
    console.log('keyup!');
});

http://jsfiddle.net/W2P9t/

Answer 2

I did not quite understand your problem, as you, unfortunately, have not added any code, but I hope that something works for you:

// listening for keyup-event in your content div
$(document).on("#mycontentdiv", "keyup", function() {
    // copy text from div to textarea
    $("#mytextarea").text($("#mycontentdiv").text());

    // trigger keyup-event on textarea
    $("#mytextarea").keyup();
});

Answer 3

$('#yourinput').keyup();

?

Answer 4

, , textarea, :

$('#contentEditable').on('keyup', function(e) {
  $('textarea').text($(this).text());
  $('textarea').trigger(e);
});

$('textarea').on('keyup', function(e) {
  console.log(e);
});

Where the HTML part will look.

<div id="contentEditable" contenteditable>Lorem ipsum</div>
<textarea></textarea>