Javascript Zeiger position im text

[Warfley]

Hallo Communiti,
ich stehe bei meine aktuellen Projekt vor einem kleinen problem, ich habe einen Div Container mit text drin(HTML formatiert) und jetzt möchte ich dass man eine zahl zurück bekommt, von der position buchstabens wo sich die Maus drüber befindet. Geht das irgendwie?

 

[wdominik]

Direkt geht das nicht soweit ich weiß. Du könntest allerdings jeden Buchstaben in <span id="pos">…</span> setzen und dann auf das darüber liegende Element einen Eventhandler legen, dieser kann dann die ID des span-Elements auslesen. Die span-Tags würde ich natürlich nicht direkt in den HTML-Code schreiben, sondern per JS generieren. Das ganze ist natürlich nicht sonderlich elegant, und für längere Texte sicher nicht sonderlich gut geeignet, aber mehr fällt mir momentan mit den in JS verfügbaren Mitteln nicht ein. Auslesen der relativen (x,y)-Koordinaten fällt ja auch flach, da Du nie sicher gehen kannst, dass der Text gleich angezeigt wird.

 

[Warfley]

Woltlab und google haben es ja bei ihren eingabefeldern irgendwie geschafft die selbst zu programmieren, also muss es ja wohl performanter funktionieren

 

[torben1]

Hallo Warfley kannst Du mir mal sagen wo Google das nutzt. Ist mir noch nicht aufgefallen.

 

[Warfley]

Google docs komplett in js gescjriebenes office

 

[torben1]

Und wo ist dort die Funkton versteckt?

 

[Warfley]

Das ganze teil ist komplett uber javascript aufgebaut der container arbeitet mit dem click event und dem key event, und irgendwie muss es ja funktionieren dass bei einem klichk auf das teil es weiss wo geklickt ist und an welcher textstelle das ist

 

[torben1]

Ich denke das es sich dabei um eine Textarea handelt. Unter http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/index.htm findest Du ein Beispiel.

Torben

 

[Warfley]

leider kann man in einem ta keine html formatierung verwenden(wie farben)

 

[xtj7]

Das ist ein bearbeitbares DIV, was für WYSIWYG genutzt wird. Dabei wird contenteditable auf true gesetzt, z.B.
<div contentEditable="true"></div>
Meinst du das?

 

[Warfley]

Diesmal geht es mir ausnahmsweise nicht um einen WYSIWYG editor, aber aus früherer erfahrung habe ich gelernt das einige windows browser die Contenteditable farben nicht anzeigen können *hust*IE*hust* das problem ist das diese browser nun mal am meisten verwendet werden, und leider nicht jeder nen mac oder ganz einfach Safari hat

 

[xtj7]

Das muss ja schon einige Jahre her sein 2005 oder 2006 habe ich zuletzt einen voll-funktionsfähigen WYSIWYG Editor programmiert, Cross-Browser, IE ab 5.5, Opera, Firefox, das volle Programm. Farben waren Kinderkram, das ging auch damals schon ohne Probleme. Die Verwaltung von komplexen Tabellen in einem WYSIWYG Editor dagegen war eine ziemlich komplexe Angelegenheit, unheimlich viel browserspezifische DOM-Bastelei, aber auch das hab ich hinbekommen.
Der Browser mit dem es lange Zeit am problematischsten war, da er ewig kein contentEditable unterstützt hat, war Safari (Dafür heute technologisch am weitesten fortgeschritten)

Heutzutage, wo man selbst den IE 6 faktisch nicht mehr zu berücksichtigen braucht, ist das doch einfach. Zumindest einfacher und den Browser weniger belastend als Lösungen wie per JavaScript dynamische Spans für jeden einzelnen Buchstaben zu erstellen oder die hässliche Variante, nichtproportionale Fonts zu verwenden.

 

[Warfley]

<div contentEditable="true" style="background-color: #cecece;"><font color="#F00"></font></div>

Funktioniert nur unter Safari und Chrome, ich habe aber bereits eine lösung für das problem gefunden...
Aber solltest du mir sagen können was oben falsch ist wäre ich dir sehr verbunden...

 

[xtj7]

Also theoretisch funktioniert das was du da machst im IE6/7/8, FF3.6/4, Opera 10/11, Safari und Chrome. Praktisch liegt der Fehler nicht an contentEditable, sondern daran wie der Opera, IE und FF mit editierbaren Divs umgehen. Dafür muss man erst einmal verstehen, welcher Code überhaupt in so einem Div erzeugt wird, denn anders als bei der reinen Interpretation von HTML (wo Browser oft äußerst großzügig mit den Auslegungen der Spezifikationen umgehen), sind Browser beim editieren von HTML sehr viel penibler.

Einige Browser unterteilen den HTML Code beispielsweise grundsätzlich in p-Tags, beim FF z.B. wird das Div unter Umständen gar nicht erst dargestellt, wenn kein p-Tag enthalten ist. IE und Opera ignorieren das Font Tag einfach und erzeugen sich ein eigenes p-Tag. Bei Opera wiederum darf das p-Tag dann nichtmal leer sein, sonst weigert er sich. Also kann man mit &nbsp; arbeiten, welches den Nachteil hat, dass man ein zusätzliches Leerzeichen am Ende des Strings vorfindet, oder man arbeitet mit einem <br />, was allein zu keinem Umbruch, aber auch zu keinen weiteren Zeichen führt - trotzdem aber den Opera zufriedenstellt - und welches ich daher bevorzuge.

Folgender Code wäre in dem Fall crossbrowser Kompatibel:

<div contentEditable="true" style="background-color: #cecece;"><p style="color: #f00;"><br /></p></div>

Das Feld mit einer vorgegebenen Farbe zu initialisieren, die sich auch wechseln lässt (anders als wenn man das Div mittels CSS direkt zu einer Farbe "zwingt"), ist in einer crossbrowser Variante nicht trivial, aber auch nicht schwer - wenn man weiß wie. Die Farben nachträglich mit JavaScript zu setzen ist dagegen um ein vielfaches einfacher

 

[Warfley]

Und schon wieder bin ich beim alten Problem der verschiedenen Browser Funktionsweisen... aber mit dem p-Tag und der CSS Formatierung funktioniert es schon mal.
Danke das werde ich mir für ein andermal merken

 

[xtj7]

Ja, das stimmt. Welche Lösung hast du denn für dein Problem gefunden bzw. jetzt genutzt?

 

[Warfley]

Mit einem p-tag über jedem zeichen