jQuery Cleditor在keyup上获取textarea值 [英] jQuery Cleditor get textarea value on keyup

问题描述

我正在使用Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html .我想获取keyup的值并将文本插入到另一个div中. cleditor带有我在下面的jsfiddle示例中当前正在使用的change()事件，但是那与keyup不同.我希望在输入时对div进行更新.我尝试过键盘输入，但不起作用.

I'm using Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. I want to get the value on keyup and insert the text into another div. cleditor comes with change() event that i'm currently using in the jsfiddle example below, but thats not the same as keyup. I want the div to be updated as i'm typing in. I tried keyup but it doesn't work.

这就是我现在拥有的

$("#input").cleditor().change(function(){
    var v = $('#input').val();
    $('#x').html(v);
})

检查jsfiddle http://jsfiddle.net/qm4G6/11/

Check jsfiddle http://jsfiddle.net/qm4G6/11/

推荐答案

cleditor似乎隐藏了textarea并将其替换为iframe(请参见cleditor源代码的第203行).

It appears that cleditor hides the textarea and replaces it with an iframe (see line 203 of cleditor source).

因此，要实现所需的功能，只需访问生成的iframe内容:

So to achieve what you want, you just need to access the resulting iframe contents:

$("#input").cleditor();

$(".cleditorMain iframe").contents().find('body').bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

更新了jsFiddle

更新以解决Tim的评论

这在Chrome和Firefox中有效(我无法访问IE):

This works in Chrome and Firefox (I don't have access to IE):

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

更新了jsFiddle

更新2

用户 ima007 能够找到更好的跨浏览器解决方案:

User ima007 was able to find a better cross-browser solution: jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

这篇关于jQuery Cleditor在keyup上获取textarea值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！