[HOW-TO/TUTORIAL] Text markieren und kopieren - möglichst universale Lösung

j-l-n · 20. Apr. 2014

Ich möchte mit JS auf Klick einen Text markieren und diesen dann kopieren.
Beginnen wir zuerst mit dem Markieren: ich würde gerne eine Lösung finden, die in allen halbwegs aktuellen Browsern läuft.
Folgender Code:

Code:

function markieren(ID){
var text = document.getElementById(ID);
selection = window.getSelection();
var range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range);
}

Bitte testen und rückmelden, in welchen Browsern der Code läuft.
Ich habe bereits einige Chrome-Versionen getestet, da klappt das Ganze problemlos. Chrome kann also schonmal abgehakt werden.

Wenn jemand Verbesserungen im Code hat, damit dieser in mehr Browsern läuft, oder sonst wie optimiert wird: bitte einfach anmerken.

Wenn wir dann das mit dem Markieren abgeschlossen haben, können wir auch zum Kopieren kommen. Und wenn das Ganze dann fertig ist, könnten wir das evtl. sogar in unsere FAQ schieben!

Pariak · 20. Apr. 2014

Hallo Julian,

in folgenden Browser funktioniert das markieren:
Firefox 29.0
IE 11.0.9600.17031
Google Chrome 34.0.1847.116 m

Beste Grüße
Pariak

j-l-n · 20. Apr. 2014

Pariak schrieb:
Hallo Julian,

in folgenden Browser funktioniert das markieren:
Firefox 29.0
IE 11.0.9600.17031
Google Chrome 34.0.1847.116 m

Beste Grüße
Pariak

Das klingt schon mal sehr gut...

Danke für's Ausprobieren!

Vor allem die älteren IE-Versionen wären jetzt noch interessant...

Pariak · 20. Apr. 2014

Julian schrieb:
Vor allem die älteren IE-Versionen wären jetzt noch interessant...

In IE 10 und IE 9 funktioniert dies noch. Ab IE 8 und abwärts funktioniert dies leider nicht mehr... Grund hier für ist, dass IE 8 und älter die Methode "getSelection" nicht unterstützt.

Beste Grüße
Pariak

j-l-n · 20. Apr. 2014

Probier jetzt nochmal, ich hab für den IE mal eine Alternative eingebaut:

Code:

function markieren(element){
 var text = document.getElementById(element);
 if (window.getSelection) {
   selection = window.getSelection();
   var range = document.createRange();
   range.selectNodeContents(text);
   selection.removeAllRanges();
   selection.addRange(range);
 }
 else { //wenn Methode nicht unterstützt (IE <= 8)
   var range = document.body.createTextRange();
   range.moveToElementText(text);
   range.select();
 }
}

PS: hab's gerade getestet, in Opera klappt's auch. Hat irgendwer noch einen Safari zum Testen? Bzw. Uralt-Versionen der bereits getesteten Browser?

Pariak · 20. Apr. 2014

In IE 8, 7 und 5 funktioniert dies nun!

j-l-n · 21. Apr. 2014

Pariak schrieb:
IE 5

Was? Du hast tatsächlich noch den richtigen Internet Explorer v5? Das ist ja krass

Oder emulierst du das in irgendeinem Kompatibilitätsmodus?

Auf jeden Fall herzlichen Dank dir für's Ausprobieren!

Pariak · 21. Apr. 2014

Ich emuliere dies mit IE als Kompatibilitätsmodus von IE 11. Dort habe ich die Möglichkeit folgende Versionen zu nutzen: IE11, IE10, IE9, IE8, IE7 und IE5. Dies hilft mir ungemein, wenn ich eine Website aufbaue, weil ich dann auch immer prüfen kann, ob sie auch für altere Versionen funktioniert.

j-l-n · 21. Apr. 2014

Wie sicher ist es denn dann eigentlich, dass - wenn es im Kompatibilitätsmodus funktioniert - es auch im echten IE <8 funktioniert?

mikdoe · 21. Apr. 2014

Ich würde mich nicht drauf verlassen, Julian. Lieber stattdessen eine virtuelle Maschine mit XP aufsetzen und im echten IE8 testen. Ältere Versionen braucht man nicht. Wer hat heutzutage NOCH kein XP? Wohl eher niemand mehr.

j-l-n · 21. Apr. 2014

Was mir noch aufgefallen ist: das Ganze funktioniert nicht mehr , wenn man

Code:

"use strict";

hinzufügt, also den STRICT-MODE benutzt. Warum?

PS: könnte irgendwer das Skript noch unter Safari testen?

mikdoe · 21. Apr. 2014

Julian, wenn es bei use strict nicht mehr klappt müsste was in der Fehlerkonsole sehen.
Und den Safari gibt es bis Version 5.1.7 (2010) auch für Windows: http://support.apple.com/kb/dl1531
Wenn dir diese Version nicht reicht muss einer mit einem MAC testen, denn nur für Mac kann man die aktuelle Version 7 (2014) bekommen. Apple hat die Windows Schiene einschlafen lassen.

j-l-n · 22. Apr. 2014

mikdoe schrieb:
Julian, wenn es bei use strict nicht mehr klappt müsste was in der Fehlerkonsole sehen.

Ne, da steht leider nichts drin. Hab grade extra nochmal nachgesehen.

mikdoe · 22. Apr. 2014

Das einzige, was mir so auffällt ist, dass vor selection kein var steht. Versuchs mal damit.

j-l-n · 22. Apr. 2014

mikdoe schrieb:
Das einzige, was mir so auffällt ist, dass vor selection kein var steht. Versuchs mal damit.

Tatsächlich, jetzt funktioniert's auch im strict-Mode... Danke!

mikdoe · 22. Apr. 2014

Gern. Mit "use strict" erzwingst du ja quasi, dass Variablen immer nur für ihren Skope gültig sind. Zumindest ist das in Perl so. Und das wiederum heißt, sie auch im gewünschten Skope gültig zu machen, was in JS mit var gemacht wird, in Perl ist es my.

Welchen Stand hat das Ganze denn jetzt?

j-l-n · 22. Apr. 2014

mikdoe schrieb:
Welchen Stand hat das Ganze denn jetzt?

Zurzeit sieht's so aus:

Code:

function mark(text_id){
  "use strict";
  var text = document.getElementById(text_id);

  if(window.getSelection){
     var selection = window.getSelection();
     var range = document.createRange();
     range.selectNodeContents(text);
     selection.removeAllRanges();
     selection.addRange(range);
  }

  else{
     var range = document.body.createTextRange();
     range.moveToElementText(text);
     range.select();
  }
}



function copy(text_id){
  "use strict";
  var text = document.getElementById(text_id).innerHTML;
  if(window.clipboardData){
     window.clipboardData.setData('text',text);
  }
  else{
    window.prompt("Automatisches Kopieren wird von Ihrem Browser leider nicht unterstützt!\n\n\nBitte benutzen Sie STRG+C, um den Text normal zu kopieren.", text);
  }
}

kkapsner · 23. Apr. 2014

Was ich von automatischen Ablegen in der Zwischenablage halte, hab' ich ja schon öfters geschrieben...

Aber zwei kleine Dinge zum Code:
1. Warum arbeitest du mit IDs? Es ist doch viel felxibler, wenn du der Funktion mark() und copy() direkt die Nodes übergibst. Wenn du dann noch über eine ID auf das Element zugreifen willst, kannst du das ja direkt beim Funktionsaufruf machen:

Code:

mark(document.getElementById("DEINE_ID"));

2. Willst du beim Kopieren wirklich innerHTML kopieren? Ich würde da ja nur den Text kopieren, was mit .textContent geht.

j-l-n · 23. Apr. 2014

kkapsner schrieb:
Was ich von automatischen Ablegen in der Zwischenablage halte, hab' ich ja schon öfters geschrieben...

Ja, allerdings funktioniert der Code sowieso nur im IE und vor allem erfolgt der Aufruf der Funktion erst bei explizitem Klick auf "Code kopieren"...

2. Willst du beim Kopieren wirklich innerHTML kopieren? Ich würde da ja nur den Text kopieren, was mit .textContent geht.

Das werde ich noch verbessern.

tsseh · 23. Apr. 2014

kkapsner schrieb:
Was ich von automatischen Ablegen in der Zwischenablage halte, hab' ich ja schon öfters geschrieben...

Vor allem, wer drückt schon auf einen Button "Code kopieren", wenn er diesen schon markiert hat? Da ist das CTRL+Ins doch schon automatisch gedrückt ehe jemand auch nur den Button wahrnimmt?!

Julian schrieb:
Ja, allerdings funktioniert der Code sowieso nur im IE und vor allem erfolgt der Aufruf der Funktion erst bei explizitem Klick auf "Code kopieren"...

und den Nicht-IE-User dann noch mit einer box zu nerven, macht es auch nicht besser, in dem fall würde ich dann den Button ausblenden

[HOW-TO/TUTORIAL] Text markieren und kopieren - möglichst universale Lösung

j-l-n

Guest

New member

j-l-n

Guest

New member

j-l-n

Guest

New member

j-l-n

Guest

New member

j-l-n

Guest

Moderator

j-l-n

Guest

Moderator

j-l-n

Guest

Moderator

j-l-n

Guest

Moderator

j-l-n

Guest

Super Moderator

j-l-n

Guest

Lounge-Member