Position des ausgewählten Textes ermitteln und ein Element daneben platzieren

Question

Tl;dr

Die Idee ist, dass ein Benutzer einen beliebigen Text markieren kann und ein Menü direkt neben der Auswahl erscheint, das mögliche Aktionen für den ausgewählten Text enthält.

---

Ich muss eine absolut positionierte Schaltfläche neben dem ausgewählten Text des Benutzers positionieren.

Ich binde eine Mouseup-Ereignis auf das Dokument und den ausgewählten Text zu erhalten, aber ich bin derzeit aus Ideen, wie zu wissen, wo die tatsächliche Auswahl positioniert ist, ohne es in irgendeinem Element zu wickeln, weil die Auswahl von Text über mehrere Elemente sein kann, und es würde die Struktur durcheinander, wenn ich es wickeln würde.

Answer 1

Sie könnten eine Markierungsspanne am Ende der Auswahl positionieren, ihre Koordinaten mit jQuery ermitteln, Ihre Schaltfläche an diesen Koordinaten platzieren und die Markierungsspanne entfernen.

Die folgenden Hinweise sollen Ihnen den Einstieg erleichtern:

var markSelection = (function() {
    var markerTextChar = "\ufeff";
    var markerTextCharEntity = "";

    var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);

    var selectionEl;

    return function(win) {
        win = win || window;
        var doc = win.document;
        var sel, range;
        // Branch for IE <= 8 
        if (doc.selection && doc.selection.createRange) {
            // Clone the TextRange and collapse
            range = doc.selection.createRange().duplicate();
            range.collapse(false);

            // Create the marker element containing a single invisible character by creating literal HTML and insert it
            range.pasteHTML('<span id="' + markerId + '" style="position: relative;">' + markerTextCharEntity + '</span>');
            markerEl = doc.getElementById(markerId);
        } else if (win.getSelection) {
            sel = win.getSelection();
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(false);

            // Create the marker element containing a single invisible character using DOM methods and insert it
            markerEl = doc.createElement("span");
            markerEl.id = markerId;
            markerEl.appendChild( doc.createTextNode(markerTextChar) );
            range.insertNode(markerEl);
        }

        if (markerEl) {
            // Lazily create element to be placed next to the selection
            if (!selectionEl) {
                selectionEl = doc.createElement("div");
                selectionEl.style.border = "solid darkblue 1px";
                selectionEl.style.backgroundColor = "lightgoldenrodyellow";
                selectionEl.innerHTML = "&lt;- selection";
                selectionEl.style.position = "absolute";

                doc.body.appendChild(selectionEl);
            }

            // Find markerEl position http://www.quirksmode.org/js/findpos.html
        var obj = markerEl;
        var left = 0, top = 0;
        do {
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);

            // Move the button into place.
            // Substitute your jQuery stuff in here
            selectionEl.style.left = left + "px";
            selectionEl.style.top = top + "px";

            markerEl.parentNode.removeChild(markerEl);
        }
    };
})();

Answer 2

Ich verwende getBoundingClientRect(), wenn ich möchte, dass der Inhalt ungestört bleibt, während ich zusätzliche Inhalte in seiner Nähe platziere.

    var r=window.getSelection().getRangeAt(0).getBoundingClientRect();
    var relative=document.body.parentNode.getBoundingClientRect();
    ele.style.top =(r.bottom -relative.top)+'px';//this will place ele below the selection
    ele.style.right=-(r.right-relative.right)+'px';//this will align the right edges together

das funktioniert in Chrome, aber der IE gibt gerne seltsame Dinge von sich, daher hier eine browserübergreifende Lösung: (Getestet in Chrome und IE, funktioniert wahrscheinlich auch anderswo)

https://jsfiddle.net/joktrpkz/7/

Answer 3

Sie sollten wahrscheinlich ein Element mit absoluter Position am Ende des "Bereichs" einfügen. Dies funktioniert in verschiedenen Browsern unterschiedlich, so dass Ihre beste Wette könnte sein, zu schnüffeln.

Und da Sie gefragt haben: So macht es die New York Times in ihrer Datei "altClickToSearch.js":

function insertButton() {

selectionButton = new Element(
        'span', {
          'className':'nytd_selection_button',
          'id':'nytd_selection_button',
          'title':'Lookup Word',
          'style': 'margin:-20px 0 0 -20px; position:absolute; background:url(http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png);width:25px;height:29px;cursor:pointer;_background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png", sizingMethod="image");'
        }
    )

if (Prototype.Browser.IE) {
  var tmp = new Element('div');
  tmp.appendChild(selectionButton);
  newRange = selection.duplicate();
  newRange.setEndPoint( "StartToEnd", selection);
  newRange.pasteHTML(tmp.innerHTML);
  selectionButton = $('nytd_selection_button');
}
else {
  var range = selection.getRangeAt(0);
  newRange = document.createRange();
  newRange.setStart(selection.focusNode, range.endOffset);
  newRange.insertNode(selectionButton);
}
}