0

所以要重现这个问题，这里有一个小提琴：http: //jsfiddle.net/QRgE9/1/

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

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

您可以看到，在您做出选择后，无法找到光标，用户必须再次单击 div。做出选择后，如何使光标闪烁（不会失去焦点）？我知道 facebook 可以做到这一点。所以我想我错过了一些东西。

此外，光标并不总是附加在字符串的末尾。如果情况是我将它插入到字符串的中间，那么光标应该从字符串的中间重新开始。

这是用户进行选择时触发的代码：

$(".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();

    });
4

1 回答 1

0

要解决失去焦点的问题，请将事件处理程序与click而不是 a绑定mousedown，然后手动设置焦点：

$(".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();

});
于 2013-05-18T00:24:43.977 回答