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

Ich war auf der Suche nach der gleichen Sache, meine Lösung war diese:

$('#el-id').focus().select();

Answer 2

Eine aktualisierte Version, die in Chrome funktioniert:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

http://jsfiddle.net/KcX6A/326/

Answer 3

Die Antwort von lepe hat mir bis auf ein paar Dinge gefallen:

1. Browser-Sniffing, jQuery oder nicht, ist nicht optimal
2. DRY
3. Funktioniert nicht im IE8, wenn obj's parent nicht unterstützt createTextRange
4. Die Fähigkeit von Chrome, die setBaseAndExtent sollte gehebelt werden (IMO)
5. Es wird kein Text ausgewählt, der sich über mehrere DOM-Elemente erstreckt (Elemente innerhalb des "ausgewählten" Elements). Mit anderen Worten, wenn Sie selText auf ein div mit mehreren span-Elementen, wird es no wählen Sie den Text jedes dieser Elemente aus. Das war ein Deal-Breaker für mich, YMMV.

Das habe ich mir ausgedacht, wobei ich mich von der Antwort von lepe habe inspirieren lassen. Ich bin mir sicher, dass man mich auslachen wird, weil es vielleicht ein bisschen plump ist (und eigentlich noch mehr sein könnte, aber ich schweife ab). Aber es funktioniert und vermeidet Browser-Sniffing und Das ist der Punkt .

selectText:function(){

    var range,
        selection,
        obj = this[0],
        type = {
            func:'function',
            obj:'object'
        },
        // Convenience
        is = function(type, o){
            return typeof o === type;
        };

    if(is(type.obj, obj.ownerDocument)
        && is(type.obj, obj.ownerDocument.defaultView)
        && is(type.func, obj.ownerDocument.defaultView.getSelection)){

        selection = obj.ownerDocument.defaultView.getSelection();

        if(is(type.func, selection.setBaseAndExtent)){
            // Chrome, Safari - nice and easy
            selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
        }
        else if(is(type.func, obj.ownerDocument.createRange)){

            range = obj.ownerDocument.createRange();

            if(is(type.func, range.selectNodeContents)
                && is(type.func, selection.removeAllRanges)
                && is(type.func, selection.addRange)){
                // Mozilla
                range.selectNodeContents(obj);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {

        range = document.body.createTextRange();

        if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
            // IE most likely
            range.moveToElementText(obj);
            range.select();
        }
    }

    // Chainable
    return this;
}

Das war's. Einiges von dem, was Sie sehen, dient der Lesbarkeit und/oder Bequemlichkeit. Getestet auf Mac in den neuesten Versionen von Opera, Safari, Chrome, Firefox und IE. Auch im IE8 getestet. Normalerweise deklariere ich Variablen nur, wenn sie in Codeblöcken benötigt werden, aber jslint schlug vor, sie alle oben zu deklarieren. Ok jslint.

bearbeiten Ich habe vergessen anzugeben, wie man dies mit dem Code des Auftraggebers verbindet:

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

Prost

Answer 4

Für jeden Tag kann man mit diesem kurzen und einfachen Code den gesamten Text innerhalb dieses Tags auswählen. Er wird den gesamten Tag-Bereich mit gelber Farbe hervorheben und den Text darin mit einem einzigen Klick auswählen.

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

Answer 5

Lepe - Das funktioniert bei mir hervorragend, danke! Ich habe Ihren Code in eine Plugin-Datei, dann verwendet es in Verbindung mit einem jeder Anweisung, so dass Sie mehrere pre-Tags und mehrere "Select all"-Links auf einer Seite haben kann und es wählt die richtige pre zu markieren:

<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
        $(".selectText").each(function(indx) {
                $(this).click(function() {                 
                    $('pre').eq(indx).selText().addClass("selected");
                        return false;               
                    });
        });
  });