javascript - 像 twitter 一样将插入符号放在可编辑的 div 的末尾

Question

http://jsfiddle.net/m45uM/

用 a 标签替换效果很好，但它会将我设置到可编辑 div 内的第一个位置。

我该如何解决这个问题？我如何才能触发一个事件，我目前将我的插入符号放在一个标签内，就像 Twitter 那样？

function replacer(match, p1, p2, p3, offset, string) {
    var name = '';
    var user = '';
    $.each(ar.data, function (i, item) {
        var keyword = match.substring(1, (match.length - 1));
        if (keyword == item.name) {
            user = item.user;
            name = item.name;
        }
    });
    return '<a href="/' + user + '">' + name + '</a>';
}
$(document).ready(function (e) {
    $('body').on('keyup', '#cont', function (e) {
        var cont = $('#cont').html();
        var cont2 = cont.replace(/\@\w+\s/gi, replacer);
        $('#cont').html(cont2);
        console.log($('#cont').html());
    });
});
var ar = {
    "data": [{
        "user": "testuser1",
            "name": "testname1"
    }, {
        "user": "testuser2",
            "name": "testname2"
    }]
};
console.log(ar);

Answer 1

在我尝试这个之前有几件事:

1. 请不要将元素作为字符串添加到 dom - “return ..”。您将很难使用此节点执行其他操作。相反，我建议您使用 DOM API(创建/删除/替换/附加/等)来执行这些功能。当您通读时，我的建议会很清楚。

2. 您返回一个新字符串并盲目地将 HTML 设置为该特定字符串 - 您将丢失它之前的所有文本。示例:Hello my name is @testuser1 变成了 @- 你失去了“Hello my name is”

解决方法:

要照顾胡萝卜的放置，您必须记住用户的选择。注意 - 如果您更改 HTML，浏览器将丢失此选择；因此，您需要手动跟踪它。

在“替换”文本之前，您可以通过以下方式获得选择:

//IE & Others
if (window.getSelection) {
    userSelection = window.getSelection();
} else if (document.selection) {
    userSelection = document.selection.createRange();
}
selectedNode = userSelection.anchorNode;
selectedOffset = userSelection.anchorOffset;

替换文本后，您需要将选择设置回容器。

//IE & Others


var range,
        selection;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(targetElement, targetOffset);
        range.setEnd(targetElement, targetOffset);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        range = document.selection.createRange();
        range.moveToElementText(targetElement.parentElement);
        range.collapse(true);
        range.moveEnd('character', targetOffset);
        range.moveStart('character', targetOffset);
        range.select();
    }
}

目标元素和目标偏移量是您要定位的节点和您希望光标所在的位置(从左侧开始)。

既然基础知识已经完成，那么困难的部分来了:

• 当您通过放入 anchor 元素来分解文本 (TextNode) 时，您需要将目标元素作为 anchor 元素，并将偏移量设为 anchor 元素内文本的长度。如果您使用 DOM API 并将此元素存储为变量，这会容易得多。

• 您需要迎合用户可能转到文本的任何部分并输入@username1 的情况；这应该相当简单。

您也可以使用 Rangy JS 库来实现这一点。

玩得开心!