如何使用 jQuery 检测使用 jWYSIWYG 插件的文本区域内容的更改？

发布于 2024-12-29 12:25:55 字数 382 浏览 5 评论 0原文

我在表单中的文本区域上使用 jwysiwyg 插件（jwysiwyg：https://github.com/akzhan/jwysiwyg< /a> ）

我想检测表单中任何文本区域的更改。

通常，对于标准的非所见即所得文本区域，我这样做：

$('textarea').change(function(e){
    alert('Something changed!');
 });

由于 jwysiwyg 的 DOM 操作，当使用 jwysiwyg 时，这被证明是无效的。

有人有任何指点吗？

原文

I'm using the jwysiwyg plugin on textareas in my form (jwysiwyg: https://github.com/akzhan/jwysiwyg )

I want to detect changes to any of the textareas that are in my form.

Normally, with a standard non-wysiwyg textarea, I do:

$('textarea').change(function(e){
    alert('Something changed!');
 });

This proves ineffective when jwysiwyg is being used due to jwysiwyg's DOM manipulation.

Anyone have any pointers?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那些过往 2025-01-05 12:25:55

使用此代码，我已经使用 help/example/01.basic.html 和 02.full.html 对其进行了测试，
我想它也可以与其他解决方案一起使用：

$(document).ready(function(){
var current = $("#wysiwyg-wysiwyg-iframe").contents().find('html');

     function detectFn(){
          alert('Detected');
       } 

       var timer;

    current.bind({    
                keyup: function(){
                    clearTimeout(timer);
          timer = setTimeout(detectFn, 2000)

                }
    });

});

来源：
Yasir Laghari 和 Ghommey 拥有该解决方案的真正功劳。

jQuery/JavaScript：访问 iframe 的内容

按键时，X秒后停止时调用函数

说明：

1）“jwysiwyg 插件”的作用是替换 iframe 的 textarea。文本位于“p”标签内，另一件事要考虑的是该标签不能被单击，如果单击文本，则实际单击的是“iframed html”标签。

2) 对于 jQuery 访问和选择 iframed 元素，必须使用“contents()”方法。这样我们就可以开始使用 iframe 触发一些功能。

3) 创建 detectorFn()，它将在检测到假文本区域中的更改后执行您想要使用的代码。

4) 声明变量“timer”。

5）bind()方法必须与'iframed html'标签一起使用才能使用keyup事件。这样，将模拟文本区域的打字动作。

6）每个keyup都会多次执行Detect函数，为了防止这种情况，我们使用setTimeout方法并将DetectFn存储在变量'timer'中。最后，该变量必须作为参数传递给clearTimeout，这样每次按键都会取消先前执行的检测函数。

Use this code, I've tested it with the help/example/01.basic.html and 02.full.html,
I guess it will work with the others too:

$(document).ready(function(){
var current = $("#wysiwyg-wysiwyg-iframe").contents().find('html');

     function detectFn(){
          alert('Detected');
       } 

       var timer;

    current.bind({    
                keyup: function(){
                    clearTimeout(timer);
          timer = setTimeout(detectFn, 2000)

                }
    });

});

The sources:
Yasir Laghari and Ghommey have the real credit of this solution.

jQuery/JavaScript: accessing contents of an iframe

On keypress, when stop after X seconds call function

Explanation:

1) The 'jwysiwyg plugin' what it does is to replace the textarea for an iframe. The text is inside a 'p' tag, another thing to consider is that this tag can not be clicked, if you click the text, what you are actually clicking is the 'iframed html' tag.

2) For jQuery to access and select an iframed element, the 'contents()' method must be used. That way we can start triggering some functions with the iframe.

3) Create the detectFn() that will execute the code you want to use after detecting the change in the fake textarea.

4) Declare the variable 'timer'.

5) The bind() method must be used with the 'iframed html' tag for using the keyup event. That way the typing action of a textarea will be simulated.

6) Each keyup will execute the detect function multiple times, to prevent that, we use the setTimeout method and store the detectFn in the variable 'timer'. Finally the variable must be passed to the clearTimeout as an argument, that way each keyup, will cancel the previous execution of the detect function.

回复收藏 0 原文

鹿港巷口少年归 2025-01-05 12:25:55

我发现这要简单得多：

    $('#editor_textarea').wysiwyg('document').keypress(function(e) {
        e.preventDefault(); //This will cancel the keypress
        alert('Keypress in jwysiwyg editor detected!');
    });

I found this to be much simpler:

    $('#editor_textarea').wysiwyg('document').keypress(function(e) {
        e.preventDefault(); //This will cancel the keypress
        alert('Keypress in jwysiwyg editor detected!');
    });

回复收藏 0 原文