selection - 为什么 Rangy 库不适用于 Opera 中的 contenteditable？

Question

我在 contenteditable DIV 中使用流行的Rangy 库。我的代码很简单：

var saved_selection = false;

$('#contenteditable').bind('keypress mouseup', function(e){
  $(this).find('.rangySelectionBoundary').remove();
  saved_selection = rangy.saveSelection();
});​

现在这在 Chrome 和 FF 中效果很好。然而，在 Opera 中，它的行为非常奇怪，因为它不允许在 contenteditable 中插入任何字符，而且它会失去焦点，或者至少看起来如此。

我已经准备好 jsFiddle 进行测试。在 Opera 中，无法在可编辑的 DIV 中输入任何字符：http: //jsfiddle.net/twST6/1/

任何人都可以解释和解决我的问题如何使这段代码在 Opera 中工作？

提前感谢您的帮助。

Answer 1

有趣的。我认为问题在于在 Opera 中的按键事件期间更改 DOM 会阻止本机浏览器按键动作的发生（我想我以前见过）。除了避免在每次按键时保存选择之外，我看不到一个简单的方法。另一种解决方案是将选择保存为内容中的字符索引，这不会更改 DOM，因此应该可以工作。看到这个答案：

https://stackoverflow.com/a/5596688/96100

我也即将为 Rangy 发布更强大的基于字符索引的选择保存/恢复。在此处查看演示：

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

顺便说一句，Rangy 中有一个内置方法可以删除选择标记：

rangy.removeMarkers(saved_selection);