Mathias Schäfer (molily): Neuer Artikel: Text eines Elements markieren

Einfache Funktion zum Markieren des Inhalts eines Elements

Der neue Artikel Text automatisch markieren stellt eine Funktion vor, mit der sich der Inhalt eines Elementes per JavaScript markieren lässt. Dabei werden die verschiedenen proprietären Modelle zum Zugriff auf Markierungen vorgestellt, die Microsoft und Mozilla entwickelt haben.

Der Artikel soll vorerst einen Einstieg in eine komplexe Problematik bieten, die sich in Zeiten der Verlagerung von klassischen Desktop-Anwendungen ins Web (Textverarbeitung, WYSIWYG-Editoren, Mail-Interfaces usw.)
wachsender Relevanz erfreut: Das Auslesen, Setzen und Verändern von Bereichen und Markierungen im Dokument.

Feedback wird gerne unter molily@selfhtml.org entgegengenommen.

  1. „wird aber derzeit nur vom [...] Firefox ab Version 1.0.8 [unterstützt]“

    Wundert mich, da Firefox 1.0.8 den Firefox 1.0.0 nur ein paar Sicherheitsupdates trennt. Und ich vermute, dass sogar die Firefox-Alpha/Betaversionen und evtl. sogar die Mozilla Suite in älteren Versionen das unterstützt.

  2. Getestet wurde mit 1.0.8, natürlich kann es 1.0.0 auch. Davor habe ich nicht getestet, weil mir die Prä-Versionen irrelevant erscheinen, da sie keinerlei Verbreitung haben.

  3. Die aktuellen WebKit-Versionen (getestet mit r27953 vom 22.11.07) selektieren den Text wie gewünscht.

  4. Cool! Danke für die Ergänzung, Orlando.

    Hier ist übrigens eine Testseite für die verschiedenen Lösungsmethoden. Welche Objekte werden denn dort als verfügbar angezeigt?

  5. In Safari 3.0.4 sind folgende Objekte verfügbar:

    document.body.createTextRange: undefined
    document.selection: undefined
    window.getSelection: function
    + selection.selectAllChildren: undefined
    + selection.addRange: function
    + selection.removeAllRanges: function
    document.createRange: function
    + range.selectNode: function

    Safari 3 meldet dann auch einen Fehler in der JavaScript-Konsole Value undefined (result of expression selection.selectAllChildren) is not object und selektiert nur das vierte Beispiel.

    In WebKit wird selection.selectAllChildren mittlerweile als function ausgewiesen und alle vier Beispiele funktionieren ohne Fehlermeldung.

    Beide Ergebnisse gelten sowohl für OS X als auch für Windows.

  6. Sehr lustig, ich hätte nicht gedacht, dass die vierte Methode - die ist eigentlich eine umständliche Alternativmethode für Firefox - Safari zufriedenstellt. Und die Entwicklung von WebKit ist sehr begrüßenswert. Da werde ich den Artikel wohl ergänzen. Danke nochmal für die Tests!

  7. zum Ausblick möchte ich noch ergänzen, dass sich der Zugriff auf die Zwischenablage im IE nicht nur auf Text beschränkt, sondern darüber hinaus auch Zugriff auf Bestandteile einer Webseite wie auch Bilder möglich ist. Dies erfolgt nicht über das clipboardData-Objekt sondern über die Methode document.body.createControlRange(), siehe dieses Beispiel.