Markieren von Text in einem Element (ähnlich wie das Hervorheben mit der Maus)

Question

Ich möchte, dass Benutzer auf einen Link klicken, dann wird der HTML-Text in einem anderen Element ausgewählt ( no eine Eingabe).

Mit "markieren" meine ich die gleiche Art und Weise, wie Sie Text markieren würden, indem Sie mit der Maus über ihn ziehen. Es war schwierig, dies zu recherchieren, weil jeder von "auswählen" oder "markieren" in anderen Begriffen spricht.

Ist dies möglich? Mein Code bis jetzt:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) {
    $("#" + element).select();
}

Übersehe ich etwas Offensichtliches?

Answer 1

Einfaches Javascript

function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));

<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

Hier ist ein funktionierende Demo . Für diejenigen unter Ihnen, die ein jQuery-Plugin suchen, habe ich auch eine davon .

---

jQuery (ursprüngliche Antwort)

Ich habe eine Lösung für dieses Problem gefunden in dieses Thema . Ich war in der Lage, die gegebenen Informationen zu ändern und mischen Sie es mit ein wenig jQuery, um eine völlig awesome Funktion, um den Text in jedem Element, unabhängig von Browser auswählen zu erstellen:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

Answer 2

Hier ist eine Version ohne Browser-Sniffing und ohne jQuery-Abhängigkeit:

function selectElementText(el, win) {
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

Answer 3

Ce site Gewinde (jetzt tot) enthält wirklich wunderbare Sachen. Aber ich bin nicht in der Lage, es richtig auf dieser Seite mit FF 3.5b99 + FireBug aufgrund von "Security Error" zu tun.

Yipee!! Ich war in der Lage, die gesamte rechte Seitenleiste mit diesem Code auszuwählen, ich hoffe, es hilft dir:

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

PS:- Ich war nicht in der Lage, Objekte zu verwenden, die von Jquery-Selektoren wie

   var w=$("div.welovestackoverflow",$("div.sidebar"));

   //this throws **security exception**

   r.selectNodeContents(w);

Answer 4

Jasons Code kann nicht für Elemente innerhalb eines iframe verwendet werden (da sich der Geltungsbereich von Fenster und Dokument unterscheidet). Ich habe dieses Problem behoben und ihn so geändert, dass er wie jedes andere jQuery-Plugin verwendet werden kann (verkettbar):

Beispiel 1: Auswahl des gesamten Textes innerhalb der < code > Tags mit einem Klick und Hinzufügen der Klasse "selected":

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

Beispiel 2: Beim Klicken auf eine Schaltfläche wird ein Element innerhalb eines Iframe ausgewählt:

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

Hinweis: Denken Sie daran, dass sich die iframe-Quelle in derselben Domäne befinden sollte, um Sicherheitsfehler zu vermeiden.

jQuery-Plugin:

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

Ich habe es in IE8, Firefox, Opera, Safari und Chrome (aktuelle Versionen) getestet. Ich bin nicht sicher, ob es in älteren IE-Versionen funktioniert (ehrlich gesagt ist mir das egal).

Answer 5

Sie können die folgende Funktion verwenden, um den Inhalt eines beliebigen Elements auszuwählen:

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

Diese Funktion kann wie folgt aufgerufen werden:

$('#selectme').selectText();