在另一个 contenteditable div 的 keyup() 上的 textarea 上模拟 keyup()答案

【问题标题】：simulate keyup() on a textarea on keyup() of another contenteditable div在另一个 contenteditable div 的 keyup() 上的 textarea 上模拟 keyup()
【发布时间】：2013-10-11 06:01:44
【问题描述】：

场景如下：

我有一个内容可编辑的 div。我还有一个 textarea，在 .keyup() 上发生了一些事情。
我需要这样，在 contenteditable div 的 keyup() 上，将 contenteditable div 中输入的文本复制到 textarea 中，然后通过 jquery 触发 textarea 的 keyup 事件。

到目前为止我所取得的成就：

我发现，只有在对文本区域进行物理点击后，才会触发 keyup()。最初，如果我在 textarea 上执行 .trigger('keyup') 什么都不会发生。但是如果我点击 textarea，然后在 contenteditable div 中输入任何内容，然后在 textarea 上执行 .trigger('keyup')，textarea 的 keyup 事件就会被触发，一切都像魅力一样。

任何方向将不胜感激。提前致谢。

【问题讨论】：

你在什么浏览器上测试？这在 Chrome 31 和 Firefox 24 jsfiddle.net/koala_dev/MGWZY 中运行良好

标签： jquery

【解决方案1】：

不确定您的问题是什么。这工作正常：

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/

【讨论】：

需要注意的一点是，如果您在textarea 中输入任何内容，那么编辑#editable_div 将不再影响textarea 的值。你想在textarea 上使用.val() 而不是.text()：jsfiddle.net/W2P9t/3

【解决方案2】：

我没有完全理解你的问题，因为很遗憾你没有附加任何代码，但我希望这对你有用：

// 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();
});

【讨论】：

【解决方案3】：

你试过了吗

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

【讨论】：

【解决方案4】：

如果您希望在内容可编辑和文本区域中都有确切的事件，您可以这样实现：

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

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

HTML 部分应该是这样的。

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

【讨论】：