一个div元素中的html变化的jQuery事件？ [英] jQuery event for html change in a div element?

问题描述

长篇小说 - 我有一个可编辑的< div> ，我想在某人粘贴某些东西时清除格式。由于jQuery无法控制剪贴板，而是不想进入跨浏览器兼容性，我想我会听内容更改时运行的事件。

我尝试过 $（＃mydiv）。change（）但显然这只适用于文本字段和文本区域（？），那么有办法吗？

我也接受替代解决方案，我选择使用的任何解决方案都将被标记为正确答案。

谢谢！ / p>

解决方案

您可以使用 .keyup（） 进行复制和粘贴。右键单击，然后在上下文菜单中选择粘贴似乎没有记录点击，因此 .click（） 不起作用，而是使用 setInterval（） 检查每X秒捕获右键单击

不确定是否可以将 .keyup（）绑定到div（无论div是否可以跨越所有的浏览器），但是所有的keyup都会冒泡到文档中，所以 $（document）将始终有效。

  $（function（）{
 
 //获取初始文本：
 var previous = $（＃mydiv）。text（）; 
 
 //如果点击
 $（＃mydiv），使DIV可编辑点击（function（）{this.contentEditable ='true';}）; 
 
 //创建一个功能，如果有变化，该怎么办：
 $ check = func （$（＃mydiv）。text（）！= previous）{
 //如何处理？有一个变化
 // ... 
} 
 
 //存储什么内容供以后比较
上一个= $（＃mydiv）。文本（）; 
} 
 
 //将div更改的处理程序添加到keyup（ctr + v）
 //和mouseclick（右键单击）
 $（文档）。 KEYUP（$检查）; 
 //右键单击工作是检查每个Xs 
 setInterval（function（）{$ check（）;}，1000）; 
}）; 
  

jsFiddle示例

这适用于粘贴它捕获ctr，shift等键。 （如果你尝试它，并且你释放一个键之后，然后关注的状态，因为状态将只显示更改后发布后的第一个键和相同之后发布第二个....应该）。

---

注意：我喜欢同时拥有一个 .keyup（）处理程序和一个 setInterval ，因为这保证了反馈是即时的按键....即使在右键粘贴后可能会有滞后。

Long story short - I have an editable <div> and I want to clear formatting when someone pastes something in. Since jQuery has no control over the clipboard and I don't want to get into cross-browser compatibility, I figured I'd listen for an event that runs when the content changes.

I've tried $("#mydiv").change() but obviously that only works on text fields and textareas(?), so is there a way to do this?

I'd also accept alternative solutions, and any solution I choose to use will be marked as the correct answer.

Thanks!

解决方案

You can make use of .keyup() for copy and pasting. The right click followed by choosing paste in the context menu doesn't seem to record a click, so .click() doesn't work.... instead use setInterval() to check every X seconds to capture right click pastes.

Not sure if you can bind .keyup() to the div (whether the div is focusable across all browsers), but all keyups bubble up to the document, so $(document) will always work.

$(function() {

      // Get initial text:
    var previous = $("#mydiv").text();

      // Make DIV editable if clicked
    $("#mydiv").click(function() { this.contentEditable = 'true'; });

      // Create a function for what to do if there is a change:
    $check = function() {

          // Check for a change
        if ($("#mydiv").text() != previous) {
            // What to do if there's been a change
            // ...
        }

          // Store what contents are for later comparison
        previous = $("#mydiv").text();        
    }

      // Add the div changed handler to both keyup (ctr + v)
      //   and mouseclick (right click paste)
    $(document).keyup($check);
      // Right click work around is to check every Xs
    setInterval(function() { $check(); }, 1000);
});​

jsFiddle Example

This works with pasting.... it captures ctr, shift, etc keys. (if you try it out w ctr-v and you release one key after the other, then keep an eye on the status, since the status will only show changed after the release of the first key and same after the release of the second.... as it should).

---

Note: I do like having both a .keyup() handler and a setInterval, since this guarantees that the feedback is instant for keystrokes.... even though there might be a lag after a right click paste.

这篇关于一个div元素中的html变化的jQuery事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！