Chrome/Safari 中的 ContentEditable 焦点答案

【问题标题】：ContentEditable focus in Chrome/SafariChrome/Safari 中的 ContentEditable 焦点
【发布时间】：2011-04-23 16:19:28
【问题描述】：

我有一个内容可编辑的 div，需要在页面加载时关注（将光标放在第一行）。

document.getElementById("editor").focus() 在 Firefox 和 IE 中运行良好，但在 Chrome/Safari 中它只会选择整个内容！

有没有办法让它正常工作？

提前致谢，
嘘

【问题讨论】：

【解决方案1】：

这个问题可能不再与提问者相关，但我会为以后的读者回答。基本原则是将选择设置为元素开头的折叠范围。

我通过使用 Rangy JS 库解决了这个问题：http://code.google.com/p/rangy

var r = rangy.createRange();
r.setStart( document.getElementById('editor'), 0 );
r.collapse(true);
rangy.getSelection().setSingleRange(r);

这可能不是必需的，但它确实可以跨浏览器工作，而且 Rangy 还提供了许多额外的实用程序，所以它可能值得研究 :)

【讨论】：

【解决方案2】：

我可以通过调用链接到 attr() 方法的 focus() 方法将焦点添加到 DIV

$el.attr('contenteditable', "true").focus()

【讨论】：