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

フォーカスが失われる問題を修正するには、イベント ハンドラーをclicka ではなく にバインドし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 に答える