• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung

Javascript Zeiger position im text

Warfley

Braeburn
Registriert
01.11.09
Beiträge
43
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

Weißer Winterglockenapfel
Registriert
15.01.10
Beiträge
880
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

Braeburn
Registriert
01.11.09
Beiträge
43
Woltlab und google haben es ja bei ihren eingabefeldern irgendwie geschafft die selbst zu programmieren, also muss es ja wohl performanter funktionieren
 

torben1

Celler Dickstiel
Registriert
05.08.08
Beiträge
808
Hallo Warfley kannst Du mir mal sagen wo Google das nutzt. Ist mir noch nicht aufgefallen.
 

Warfley

Braeburn
Registriert
01.11.09
Beiträge
43
Google docs komplett in js gescjriebenes office
 

torben1

Celler Dickstiel
Registriert
05.08.08
Beiträge
808
Und wo ist dort die Funkton versteckt?
 

Warfley

Braeburn
Registriert
01.11.09
Beiträge
43
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
 

Warfley

Braeburn
Registriert
01.11.09
Beiträge
43
leider kann man in einem ta keine html formatierung verwenden(wie farben)
 

xtj7

Granny Smith
Registriert
07.03.11
Beiträge
15
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

Braeburn
Registriert
01.11.09
Beiträge
43
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

Granny Smith
Registriert
07.03.11
Beiträge
15
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

Braeburn
Registriert
01.11.09
Beiträge
43
<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

Granny Smith
Registriert
07.03.11
Beiträge
15
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

Braeburn
Registriert
01.11.09
Beiträge
43
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

Granny Smith
Registriert
07.03.11
Beiträge
15
Ja, das stimmt. Welche Lösung hast du denn für dein Problem gefunden bzw. jetzt genutzt?