contenteditable 中的选择更改事件答案

【问题标题】：selection change event in contenteditablecontenteditable 中的选择更改事件
【发布时间】：2011-12-09 07:05:12
【问题描述】：

我对 contenteditable 元素的标记如下：

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

是否有正文的选择更改事件（contenteditable）？这样我就可以检测到选定的文本块是否有粗体/下划线等。

我尝试了一些事件处理程序（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() { ... });

【问题讨论】：

标签： javascript jquery

【解决方案1】：

没有跨浏览器的方式来检测选择的变化。 IE 和最近的 WebKit 浏览器（例如 Chrome 和 Safari）支持文档上的 selectionchange 事件。 Firefox 和 Opera 没有这样的事件，您所能做的就是检测通过键盘和鼠标事件进行的选择更改，这是不能令人满意的（例如，无法从上下文或编辑菜单中检测“全选”）。

2017 年更新：现在有一种跨浏览器方式。最近的 WebKit/Blink 浏览器（Chrome、Safari、Opera）支持 selectionchange，Firefox 从 43 版开始支持。

【讨论】：

多么可悲 :-( 未来的任何展望都会以某种方式解决？可怜的 contenteditable ...
@Frodik：有一个开放的 W3C 错误来规范它：w3.org/Bugs/Public/show_bug.cgi?id=13952。如果你大惊小怪，事情有时会发生一些变化，尽管浏览器的实施者在那里影响最大。

【解决方案2】：

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

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

当你选择元素时，你可以see from here, the selectstart event is correctly fired。

【讨论】：

"selectstarts" 有效 :) ，但仅在文档元素上。起初它不起作用的原因是我稍后在代码中再次调用了richTextDoc.open();，如果之后调用 open()，事件处理程序将不起作用。谢谢 :) jsfiddle.net/6e8cR/6
This also does not work when the selection changes with the keyboard (scrolling the caret with the arrow keys.

【解决方案3】：

对于 firefox，https://developer.mozilla.org/zh-CN/docs/XPCOM_Interface_Reference/NsIEditor，在编辑器上提供 OBSERVER。假设基于 XPCOM 需要“特权”。其他溶胶。在鼠标和 kbd 跟踪旁边的 Firefox 上：

关于“焦点”和“模糊” - 所有/有关节点/元素的事件（文本？）比较焦点事件状态和模糊事件节点内容之间的节点内容（= 离开，也如果 window-close 或 sop'n 类似），并设置您的或 '_moz_dirty' 、脏属性（取决于它应该服务的对象/浏览器，也可以根据目的需要制作许多不同的脏属性）。

【讨论】：