Question

我对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() { ... });

Answer 1

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

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

Answer 2

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

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

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

Answer 3

for firefox，https://developer.mozilla.org/zh-CN/docs/XPCOM_Interface_Reference/NsIEditor，在编辑器上提供OBSERVER。假设特权＆＃39;需要作为基于XPCOM的。其他溶胶。在firefox旁边鼠标＆amp; KBD-跟踪：

on＆＃39;焦点＆＃39;并且＆＃39;模糊＆＃39; - 所有/有关节点/元素（文本？）的事件比较焦点事件状态和模糊事件节点内容之间的节点内容（=离开，如果窗口关闭或者类似于），并设置你的，或者＆＃39; _moz_dirty＆＃39; ，dirty-attribute（s。取决于它应该服务的是谁/什么浏览器，也可以根据目的要求制作许多不同的脏东西）。

选择改变事件在contenteditable

3 个答案: