使用jquery将焦点设置为可满足内容的div

Question

你能帮我理解为什么检索焦点的div将光标放在Firefox和IE 10(但不是chrome)上的第一个字符上吗?

下面是javascript代码:

$('div').on('click', function(e) {
    $(this).html($(this).text());
});

这里是jsfiddle和整个上下文。

[EDIT]谁能告诉我为什么光标要到句子的开头?

Answer 1

行为差异:

这是因为Chrome不认为内容改变时，你通过相同/确切的内容，但FF/IE不关心内容是否相同;如果有什么东西通过了，他们就会认为它被修改了。不同的浏览器引擎并不总是以相同的方式运行。

$('div').on('click', function(e) {
    $(this).html($(this).text()); // here you pass the same (previous) content
});

查看浏览器(Chrome或FF)是否将此解释为"内容更改";您可以收听DOMSubtreeModified事件。这不会在Chrome上启动，但它会在FF上启动。

$('div').on('DOMSubtreeModified', function(e) {
    console.log('content changed');
});

现在，如果你"真的"通过传递一个"new"值来改变内容;Chrome也会像FF一样。例如，试试这个:

$('div').on('click', function(e) {
    $(this).html($(this).text() + "new content"); // passing different content each time
});

现在，您将看到DOMSubtreeModified事件被触发。

为什么光标移动到开头:

这是因为;当用户点击div时，他/她实际上是将光标设置到某个位置/索引。然后你立即修改完整的内容;因此，当内容被替换时，位置/索引不再可用。此时唯一有效的位置是0(起始索引)。

这不会发生在Chrome中，如果相同的内容被传递bec。(如前所述);如果内容与以前的内容相同，Chrome不会替换内容。因此游标索引永远不会改变。但如果你传递了不同的内容;它还会将光标移动到开头。

---

这是 DOMSubtreeModified测试的小提琴

Answer 2

问题是IE和Firefox有不同的contentitable实现。这意味着，当单击时，它们选择可编辑区域内的第一个元素。

你可以使用下面的代码来解决这个问题:

var char = 3, sel; // character at which to place caret
content.focus();
if (document.selection) {
  sel = document.selection.createRange();
  sel.moveStart('character', char);
  sel.select();
}
else {
   sel = window.getSelection();
  sel.collapse(content.firstChild, char);
}

然而，我建议使用像TinyMCE或CKEditor或JQuery/JQueryUI编辑器来获得所需的效果。

另外，你也得到了很好的格式化工具!