jquery在contenteditable div中设置光标位置

这个问题的旧版本如下，在研究了更多之后，我决定重新表述这个问题。和以前一样的问题是，我需要在不高亮显示文本的情况下聚焦contenteditable div，在Chrome中直接聚焦高亮显示文本

我意识到人们通过在textarea中重置插入符号的位置来解决textarea中的这个问题。如何使用contenteditable元素实现这一点？我尝试过的所有插件都只适用于文本区域。谢谢

问题的老生常谈：

我有一个contenteditable元素 我想集中精力，但只限于 将光标放置在 元素，而不是选择 一切

elem.trigger（'focus'）使用jquery
选择整个文档中的所有文本
铬中的元素。Firefox的行为
正确地将插入符号设置为
正文的前面。我怎样才能得到它
Chrome以我想要的方式行事，或者
专注也许不是我在看的
因为

谢谢大家。
是的，因为您使用了

elem.trigger('focus'); 

尝试使用类或标识要在其上触发触发器事件的元素

演示：


Loremipsum-dolor-sit
amet，ConceteturAdipisingelit.
Aenean。



$（函数（）{
$（'[contentEditable=“true”]'）。在（'单击'）上，函数（e）{
if（！$（this）.hasClass（'editing'））{
var html=$（this.html（）；
if（html.length）{
var range=rangy.createRange（）；
$（this.toggleClass（'editing'）.html（“”+html+“”）；
var$last=$（this.find（'.content可编辑包装器'）；
范围.setStartAfter（$last[0]）；
范围。塌陷（假）；
rangy.getSelection（）.setSingleRange（范围）；
}
}
}).on（'blur'，函数（）{
$（this）.toggleClass（'editing'）.find（'.content可编辑包装器'）.children（）.last（）.unwrap（）；
});
});


注意：使用rangy.js
也许我误读了这个问题，但下面的内容不会误读吗（假设id为“editable”的
是可编辑的）？计时器之所以存在，是因为在Chrome中，选择整个元素的本机浏览器行为似乎在焦点事件后触发，从而覆盖选择代码的效果，除非延迟到焦点事件之后：

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }
    }, 1);
};

div.focus();

在对DOM进行了一番探索之后，我成功地解决了这个问题

elm.focus();
window.getSelection().setPosition(0);

它可能只适用于WebKit浏览器，但由于它是问题的唯一来源，我添加了一个条件（使用jQuery）

希望这能解决您的问题。
在pre或div标记中设置指针位置：


功能设置光标（pos）{
var el=document.getElementById（“asd”）；
var range=document.createRange（）；
var sel=window.getSelection（）；
range.setStart（el.childNodes[0]，位置）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
el.focus（）；
}
$（“按钮”）。单击（函数（）{
设置光标（5）；
});

自闭症
二
设置插入符号位置
这是一个有趣的技巧，实际上是个好主意。非常感谢。但是contenteditable是一个wysiwyg编辑器，所以我不能只替换一个文本字段。这是一个有趣的想法，对一些人来说很有价值，但这并不能回答如何在contenteditable div上设置克拉位置的问题。添加一个“假”输入框并不是一个真正的解决方案；如果我想使用输入，我会使用输入。不回答问题。更好的回答是，我已经将代码更新为最新的jQuery版本，并修改了演示，使其能够像预期的那样使用丰富的内容。没有添加额外的输入或textarea.hmm，不知道为什么，这对我不起作用。蒂姆·唐恩的回答确实如此。哇！，这是一件美丽的事情！谢谢你，蒂姆，天哪，蒂姆，你是怎么做到的。谢谢。这很好，但是我如何把焦点放在div的末尾而不是前面呢@Squirrl：更改
range.collapse的两个实例（true）到
范围。折叠（false）。这可能有助于光标定位。您确定这些工作在contenteditable上吗。我无法让它们工作。@马克：我已将代码更新为最新的jquery，并修改了演示，使其能够处理丰富的内容。
var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }
    }, 1);
};

div.focus();

elm.focus();
window.getSelection().setPosition(0);

if(!$.browser.webkit) {
    elm.focus();
} else {
    elm.focus();
    window.getSelection().setPosition(0);
}