Heim > Web-Frontend > CSS-Tutorial > Wie kann ich den gesamten Text innerhalb eines DIV per Mausklick programmgesteuert auswählen?

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

Patricia Arquette
Freigeben: 2024-12-11 17:52:10
Original
535 Leute haben es durchsucht

How Can I Programmatically Select All Text Within a DIV on Mouse Click?

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);
    }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage