选择更改事件在可满足的

selection change event in contenteditable

本文关键字：可满足 事件 选择      更新时间：2023-09-26

我的contentitable元素的标记如下:

<iframe class="rich_text">
<html style="background:none transparent;">
    <head></head>
    <body contenteditable="true"></body>
</html>
</iframe>

正文是否有选择更改事件(可满足的)?这样我就可以检测所选文本块是否有加粗/下划线等

我已经尝试了一些事件处理程序(jQuery)，但没有成功:

var richText = $(".rich_text"),
richTextDoc = richText.contents()[0],
richTextBody = richText.contents().find("body");
// Enable Design mode.
richTextDoc.open();
richTextDoc.write("");
richTextDoc.close();
richTextDoc.designMode = "on";
// Binds selection change event
$(richTextDoc).bind("select", function() { ... });
$(richTextDoc).bind("selectstart", function() { ... });
richTextBody .bind("select", function() { ... });
richTextBody .bind("selectstart", function() { ... });

更新2017 +

现在有一个跨浏览器的方式。最近的WebKit/Blink浏览器(Chrome, Safari, Opera)支持selectionchange, Firefox从43版开始支持。

老回答

没有跨浏览器的方式来检测选择的变化。IE和最近的WebKit浏览器(例如Chrome和Safari)支持文档上的selectionchange事件。Firefox和Opera没有这样的事件，你所能做的就是检测通过键盘和鼠标事件所做的选择更改，这是不令人满意的(没有办法检测"全选"

假设您的iframe的内容来自同一域，您可以使用:

$('.rich_text').contents()
  .find('body')
  .bind('selectstart', function(){});

从这里可以看到，当元素被选中时，selectstart事件被正确触发。

对于firefox, https://developer.mozilla.org/zh-CN/docs/XPCOM_Interface_Reference/NsIEditor提供了OBSERVER编辑器。假设需要基于xpcom的"特权"。火狐浏览器上除了鼠标之外的其他选项&kbd-tracking:

关于'focus'和'blur' -所有/有关节点/元素的事件(文本?)比较focus-event状态和blur-event状态的节点内容(= leave，如果window-close或类似)，并设置YOUR，或'_moz_dirty'， dirty-attribute(s)。

相关文章：