Question

所以为了重现这个问题，这里有一个小提琴：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();

    });

Answer 1

要修复丢失的焦点问题，请使用click而不是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();

});

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

1 个答案: