Javascript 在div中附加字符串的末尾设置光标/克拉

为了重现这个问题，这里有一把小提琴可以摆弄：

在框中键入以下字符串：Hello@An

然后从下拉列表中进行选择

您可以看到，在进行选择后，光标不在任何位置，用户必须再次单击div。如何使光标在我进行选择后闪烁（不会失去焦点）？我知道facebook可以做到这一点。。所以我想我错过了什么

此外，光标并不总是附加在字符串的末尾。如果我把这个插入到字符串的中间，那么光标应该在字符串中间重新开始。< /P> 以下是用户进行选择时触发的代码：

$(".display_box").live("mousedown",function(event) 
    {
        $("#friendsList").hide();
        selRange = saveSelection();
        var startOffset = selRange.startOffset;
        var endOffset = selRange.endOffset;

        var username = $(this).attr('title');
        var currentContent = $("#recommendTextArea").html();
        var E ="<span contenteditable='false' title=\"" + username + "\">"+ username + "</span> ";
        var newContent = currentContent.replace(word, E); //replacing @abc to users real name 
        $("#recommendTextArea").html(newContent);

        selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset);
        selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset);
        restoreSelection(selRange);
        event.preventDefault();

    });

$（“.display\u box”）.live（“鼠标向下”，函数（事件）
{
$（“#friendsList”）.hide（）；
selRange=saveSelection（）；
var startOffset=selRange.startOffset；
var endOffset=selRange.endOffset；
var username=$（this.attr（'title'）；
var currentContent=$（“#recommendTextArea”）.html（）；
var E=“”+用户名+”；
var newContent=currentContent.replace（word，E）；//将@abc替换为用户实名
$（“#recommendTextArea”）.html（新内容）；
selRange.setStart（$（“#recommendTextArea”）[0].childNodes[0]，startOffset）；
selRange.setEnd（$（“#recommendTextArea”）[0].childNodes[0]，endOffset）；
恢复选择（选择范围）；
event.preventDefault（）；
});

若要修复焦点丢失问题，请使用

单击

而不是

鼠标向下

绑定事件处理程序，然后手动设置焦点：

$(".display_box").live("click",function(event) /* <--- this was changed */
{
    $("#friendsList").hide();
    selRange = saveSelection();
    var startOffset = selRange.startOffset;
    var endOffset = selRange.endOffset;

    var username = $(this).attr('title');
    var currentContent = $("#recommendTextArea").html();
    var E ="<span contenteditable='false' title=\"" + username + "\">"+ username + "</span> ";
    var newContent = currentContent.replace(word, E); //replacing @abc to users real name 
    $("#recommendTextArea").html(newContent).focus(); /* <--- this was added */

    selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset);
    selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset);
    restoreSelection(selRange);
    event.preventDefault();

});

---

$（“.display_box”）.live（“单击”），功能（事件）/*我尝试过更改，但是，光标的位置总是错误的。我认为您应该将光标位置设置为
start
，即将
selRange
start和end设置为
start
，而不是
startOffset
和
endOffset
。它可能需要更多的调整，但在我尝试时通常是有效的在你的提琴上。你能发布你修改过的提琴吗对不起，我之前的评论方向错误，我无法让它正常工作。但是，问题不在于选择的开始/结束，而是选择所在的对象。当你将
span
添加到
div
时，你的div会得到子项：
Text'，
htmlspaneement`和
Text'。您希望在第二个
Text`对象中将插入符号放置在位置0处。不同的浏览器在此处的行为不同（即，SeaMonkey在结尾处获得另一个
htmlRelation
；Chrome忽略，…），所以它需要的时间比我能负担得起的要多。我希望这至少会让你走上正确的方向。我尝试获取文本新部分的索引，即在你的新跨度之后创建的
text
子级的索引。如果我们将该索引作为
idx
变量，你的选择将类似于
selRange.setStart（$（“#recommendTextArea”）[0]。childNodes[idx]，0）；selRange.setEnd（$（“#recommendTextArea”）[0]。childNodes[idx]，0）；
。但是，由于我无法实现这一点，我不能给你任何麻烦。