Rangy，令人满意的插入符号定位和专注于Firefox

Question

我正在尝试使用Rangy将光标定位在contenteditable div内，但我发现不同浏览器的行为不一致（这很奇怪，考虑到它被大肆宣传为“跨浏览器解决方案”）。

当我在Chrome 36.0.1985.143 m中打开this fiddle时，我发现在我点击的任何地方（在页面的“结果”部分内），选择都会更新，蓝色div会获得绿色边框。< / p>

然而;在第{2}步之后，访问Firefox 31将放置插入符号但不移动绿色边框...并且在步骤3之后，根本不会放置插入符号。

我的问题：

如何在contenteditable div内可靠地设置插入符号的位置，而不管“当前”选择/焦点是什么？

示例屏幕截图：

HTML：

<div id="msg">Every 2 seconds, a setInterval fires that tells rangy to set the selection to the firstChild (ie: text node) of the blue div at index 49 (between the second 2 arrows).</div>
  <ol>
    <li><span>Click the blue div, between the first 2 arrows, watch to see rangy reposition the caret.</span></li>
    <li><span>Click the red div, between the arrows, watch to see rangy reposition the caret. (Doesn't also move focus in Firefox 31 ?!?)</span></li>
    <li><span>Click this list right here.</span></li>
    <li><h4>DOES THE CARET REPOSITION?!?!</h4></li>
</ol>

<br />
<div contenteditable="true" id="one">CLICK HERE --><--  RANGY WILL REPOSITION HERE --><--</div>
<br />
<div contenteditable="true" id="two">CLICK HERE --><--</div>

CSS：

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;
}

JS：

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

Answer 1

Rangy并没有像本机浏览器选择API没有处理焦点一样自动处理焦点。你需要自己做。在这种情况下，只需调用可编辑元素的focus()方法：

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

演示：http://jsfiddle.net/afvc7r6r/2/