Javascript Firefox中可编辑的插入符号定位和焦点

我试图使用将光标定位在

contenteditable

div

中，但我发现不同浏览器的行为不一致（这很奇怪，因为这被大力吹捧为“跨浏览器解决方案”）

当我在Chrome 36.0.1985.143 m中打开时，我观察到我点击的任何地方（在页面的“结果”部分内），选择被更新，蓝色div获得绿色边框

但是,；在

Firefox31

中访问将在步骤2之后定位插入符号，但不移动绿色边框。。。在步骤3之后，将根本不定位插入符号

我的问题: 如何可靠地设置插入符号在

contenteditable

div

中的位置，而不管“当前”选择/焦点是什么

示例的屏幕截图：

HTML: JS:

---

Rangy不会自动处理焦点，就像本机浏览器选择API不会处理焦点一样。你需要自己去做。在这种情况下，只需调用可编辑元素的

focus（）

方法：

setInterval(function () {
  var editableOne = $('#one')[0];
  editableOne.focus();
  rangy.getSelection().collapse(editableOne.firstChild, 49);
}, 2000);

演示：

div#one {
  color: white;
  background-color: #00f;
}
div#two {
  color: white;
  background-color: #f00;
}
div#msg {
  background-color: #ccc;
  padding: 10px;
}

:focus {
  border: 2px solid lime;
  padding: -2px;
}

setInterval(function () {
  rangy.getSelection().collapse($('#one')[0].firstChild, 49);
}, 2000);

setInterval(function () {
  var editableOne = $('#one')[0];
  editableOne.focus();
  rangy.getSelection().collapse(editableOne.firstChild, 49);
}, 2000);