1

ユーザーが右クリックしたときに、選択したテキストにタグを追加しようとして<a>います。スタックを検索しましたが、一致が見つかりませんでした。

4

2 に答える 2

5

選択したテキストを確実に処理することは、クロスブラウザーでは少しトリッキーです。そこでは、 Tim Down のライブラリであるRangyが役に立ちます。彼は、多くのブラウザーの特異性を滑らかにしています。（ライブラリを使いたくない場合でも、テクニックを学ぶことができます。）

主要な Rangy デモの 1 つは、RangyRange#surroundContentsメソッドを使用して、選択したテキストを要素で囲みます。デモのコードは次のようになります。

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ます。

于 2012-02-15T08:48:25.220 に答える
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/

于 2012-02-15T08:50:45.347 に答える