Wie kann ich den gesamten Text innerhalb eines DIV per Mausklick programmgesteuert auswählen?

DIV-Text per Mausklick programmgesteuert auswählen

Frage

Wie kann der Benutzer bei einem DIV-Element mit Textinhalt programmgesteuert den gesamten darin enthaltenen Text auswählen? das DIV mit einem einzigen Mausklick? Dadurch können Benutzer den ausgewählten Text einfach per Drag & Drop ziehen oder direkt kopieren.

Lösung

Um den Text innerhalb eines DIV-Elements mit einem einzigen Mausklick auszuwählen, können Sie die folgende JavaScript-Funktion verwenden :

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

Implementierung

So implementieren Sie diese Funktionalität:

1. Fügen Sie die ein Funktion oben in Ihrem JavaScript-Code.
2. Fügen Sie einen Click-Event-Handler zu Ihrem DIV-Element hinzu und rufen Sie die Funktion selectText() mit der ID des DIV als Argument auf.

<div>

Mit Wenn Benutzer mit diesem Code auf eine beliebige Stelle innerhalb des DIV-Elements klicken, wird der gesamte Text in diesem DIV hervorgehoben und ausgewählt, was eine einfache Bearbeitung oder ein Kopieren ermöglicht.

Das obige ist der detaillierte Inhalt vonWie kann ich den gesamten Text innerhalb eines DIV per Mausklick programmgesteuert auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!