jquery - 使用 jquery 将焦点设置在 contenteditable div 上

Question

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

这是 JavaScript 代码:

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

这是 jsfiddle 与整个上下文。

[编辑]有人能告诉我为什么光标会移到句子的开头吗？

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 中不会发生这种情况。 (正如之前所提);如果内容与之前的内容相同，Chrome 不会替换该内容。所以游标索引永远不会改变。但如果你确实传递了不同的内容；它还会将光标移动到开头。

<小时/>

这里是the fiddle用于 DOMSubtreeModified 测试。