使用jquery在选定文本中附加内容

时间:2012-02-15 08:44:15

标签: jquery append right-click selectedtext

我正在尝试在用户右键单击它时将<a>标记附加到所选文本中。在堆栈中搜索,未找到匹配项。

2 个答案:

答案 0 :(得分:5)

可靠地处理选定的文本是一个有点棘手的跨浏览器。 Tim Down的图书馆Rangy在那里非常有用,他在许多浏览器的特性上得到了平滑。 (即使您不想使用该库,也可以根据这些技术进行研究。)

其中一个core Rangy demos使用the RangyRange#surroundContents method围绕包含元素的所选文本。演示中的代码如下所示:

function getFirstRange() {
    var sel = rangy.getSelection();
    return sel.rangeCount ? sel.getRangeAt(0) : null;
}
function surroundRange() {
    var range = getFirstRange();
    if (range) {
        var el = document.createElement("span");
        el.style.backgroundColor = "pink";
        try {
            range.surroundContents(el);
        } catch(ex) {
            if ((ex instanceof rangy.RangeException || Object.prototype.toString.call(ex) == "[object RangeException]") && ex.code == 1) {
                alert("Unable to surround range because range partially selects a non-text node. See DOM Level 2 Range spec for more information.\n\n" + ex);
            } else {
                alert("Unexpected errror: " + ex);
            }
        }
    }
}

你会做同样的事情,但使用a而不是span

答案 1 :(得分:0)

EDIT注意到你在谈论选定的文字有点太晚了。

也许您可以查看document.elementFromPoint,我认为只支持FireFox。

你在寻找这样的东西:

HTML:

<div id="rightclick">
Right Click me:   
</div>​

使用Javascript:

$("#rightclick").mousedown(function(e) {
    if (e.which === 3) {
        $(this).append("<a href='http://www.google.com'>Link</a>");
    }
});
​

查看演示: http://jsfiddle.net/BgW7x/2/