Textarea Inhalte lassen sich nicht markieren

[Franz Harlicher]

Hallo zusammen,


erstmal besten Dank für die jahrelange „passive“ Unterstützung. Der ein oder andere Beitrag in diesem Forum hat der Allgemeinheit sicherlich viel Ärger erspart.


Ich versuche seit einigen Tagen ein dragAndDrop-sortier-Script mit integrierten edit Funktionen umzusetzen. Funktional läuft alles!
Hierzu greife ich auf Methoden des aktuellen jQuery Framework zurück.


Jedoch, …

wenn ich per JavaScript eine Textarea an der zu editieren Stelle einfüge, kann ich die Inhalte dieser Textarea per Maus nicht markieren.
Das Script läuft im IE6, IE7, FF und allen anderen Gecko Browsern. Alle Browser zeigen den gleichen Bug mit der Textarea.
Mein Quelltext beinhaltet keine Validierungsfehler, weiterhin ist das DOM-Model eindeutig.


Wie kann ich es anstellen, damit die Texte in der Textarea per Maus markierbar sind?


Im Anhang findet Ihr den Link zu meinen Files. Ich habe die komplette Verzeichnisstruktur in eine RAR-File gepackt.


Runterladen, Entpacken und los geht’s =)

Online-Link zum Script:

http://franzharlicher.kilu.de/

Download-Link zum Script:

Download Link 1
Download Link 2


Ich bin gespannt!

 

[_Thor_]

Wenn du schon so lange mitgelesen hast, müsste dir doch auch aufgefallen sein, dass Archive kaum runtergeladen werden und ein Link zur Seite viel besser angenommen wird, oder?

Also mach dir kurz die Mühe, lade es auf einen Webserver und poste hier den Link, dann wirst du deutlich mehr Hilfe bekommen.

 

[crash]

Wird readOnly oder disabled auf die Textarea gesetzt? Oder gibt es ein Focus-Event, welches den Focus wieder entfernt oder ähnliches?

 

[Franz Harlicher]

Wenn du schon so lange mitgelesen hast, müsste dir doch auch aufgefallen sein, dass Archive kaum runtergeladen werden und ein Link zur Seite viel besser angenommen wird, oder?

Also mach dir kurz die Mühe, lade es auf einen Webserver und poste hier den Link, dann wirst du deutlich mehr Hilfe bekommen.

@Thor

Natürlich, der angeforderte Weblink wird in den nächsten Minuten reingestellt!!

Online-Link zum Script:

http://franzharlicher.kilu.de/

Wird readOnly oder disabled auf die Textarea gesetzt? Oder gibt es ein Focus-Event, welches den Focus wieder entfernt oder ähnliches?

Nein, es wird kein readOnly attribut für die Textarea gesetzt. Sonst liese sich der Text in der Textarea garnicht erst editieren. Hier der Auszug, welcher die Textarea an der geforderten Stelle einsetzt. Zu finden in js/scripte.js.

document.getElementById(typeID + pos).innerHTML = '<textarea class="activ" name="descrText" id="' + textareaType + '">' + text + '</textarea>';

Das Problem ist wirklich tricky und ich möchte nicht auf die dragNdrop funktion verzichten.

 

[_Thor_]

Ich hab mal ein bisschen herum probiert und es scheint an den inline-styles zu liegen, denn wenn ich die mit WebDeveloper deaktiviere, kann ich den Text wieder markieren. Welche Stelle das aber genau ist, hab ich noch nicht gefunden.

Aber mal was anderes, dein Quellcode ist grauenhaft. Tabellenlayout, es fehlen Anführungszeichen (type=text/javascript), Verschachtelungen ergeben teilweise keinen Sinn.

<td align="center"><label><strong class="white">DranNDrop</strong></label></td>

DranNDrop ist kein label, sondern eher eine Überschrift.

Das div hier ist überflüssig, da es nichts gruppiert.

<div id="comm1"><p class="no-entry" id="textComm1">Schreiben Sie einen neuen Kommentar</p></div>

Was ist das hier?

<a href="javascript:;"...

Behebe bitte erstmal die Fehler http://validator.w3.org/check?verbose=1&uri=http://franzharlicher.kilu.de/index.htm

 

[Franz Harlicher]

Ich hab mal ein bisschen herum probiert und es scheint an den inline-styles zu liegen, denn wenn ich die mit WebDeveloper deaktiviere, kann ich den Text wieder markieren. Welche Stelle das aber genau ist, hab ich noch nicht gefunden.

Hört sich nach einen Ansatz an! Ich prüfe das parallel

Aber mal was anderes, dein Quellcode ist grauenhaft. Tabellenlayout, es fehlen Anführungszeichen (type=text/javascript), Verschachtelungen ergeben teilweise keinen Sinn.

<td align="center"><label><strong class="white">DranNDrop</strong></label></td>

DranNDrop ist kein label, sondern eher eine Überschrift.

Der Quellcode ist grauenhaft, ja. Falsche Elemente wurden benutzt. Das sehe ich ein. Das was euch vorliegt ist eine abgespeckte Testversion des Scripts.

Die "falschen" HTML-Elemente führen jedoch nicht zu dem Fehler in der textarea . Weiterhin ist der Quellcode Valide!

Das div hier ist überflüssig, da es nichts gruppiert.

<div id="comm1"><p class="no-entry" id="textComm1">Schreiben Sie einen neuen Kommentar</p></div>

Was ist das hier?

<a href="javascript:;"...

Behebe bitte erstmal die Fehler [Invalid] Markup Validation of http://franzharlicher.kilu.de/index.htm - W3C Markup Validator

Falsch, wenn du genau hingeschaut hättest wäre dir aufgefallen, dass die Fehler von dem Freehost "kilu.de" kommen. kilu.de lässt auf jeder Seite eigene Scripts einbinden. Lade dir die Lokale Version und validiere Sie. -> Keine Fehler.

[/html]Was ist das hier?

<a href="javascript:;"...

Das ist der IE6 JS recognizer. sollte dir bekannt sein. "#" als href kann im IE6 zu fehlern führen. Weiterhin ist href ein "muss" attribut im "a" TAG.

 

[_Thor_]

Falsch, wenn du genau hingeschaut hättest wäre dir aufgefallen, dass die Fehler von dem Freehost "kilu.de" kommen. kilu.de lässt auf jeder Seite eigene Scripts einbinden. Lade dir die Lokale Version und validiere Sie. -> Keine Fehler.

Ja ok, hast Recht, die Fehler kommen von dem Script.

Das ist der IE6 JS recognizer. sollte dir bekannt sein. "#" als href kann im IE6 zu fehlern führen.

Nö, war mir nicht bekannt, da ich es noch nie gebraucht habe.



Und hier ist dein Problem -moz-user-select: none;

<div style="-moz-user-select: none;" class="ui-sortable" id="sortable">

https://developer.mozilla.org/en/CSS/-moz-user-select

 

[Franz Harlicher]

Und hier ist dein Problem -moz-user-select: none;

<div style="-moz-user-select: none;" class="ui-sortable" id="sortable">

https://developer.mozilla.org/en/CSS/-moz-user-select

Guter Ansatz,aber leider falsch. =(

Ich arbeite parallel an den CSS. Jedoch scheint der Fehler hier nicht zu liegen. Auch wenn ich "-moz-user-select: none;" lösche passiert nichts.

Es ist die Sortieranweisung die durch

<div style="-moz-user-select: none;" class="ui-sortable" id="sortable">

id="sortable" initialisiert die Sortierfunktion und das "DIV"-Element als sortierbar.

Vielleicht Blocken hier die AJAX-Abfragen das DOM-Model? Es scheint als ob der Client die Textarea einfach nicht richtig erfassen kann.

 

[_Thor_]

Guter Ansatz,aber leider falsch. =(

Nicht in deinem Testcase. Wenn ich es da lösche, kann ich alles wunderbar markieren. Vielleicht hast du in deiner Verison noch was anderes mit drin, das musst du dann herausfinden.

 

[Franz Harlicher]

Heya, Problem gelöst!


jQuery hat also wirklich den MOZ-Style gesetzt und die DIV-Box in der Auswahl disabled.

Lösung:


Im jQuery wurde standarmäßig -moz-none-select = 'none' gesetzt. Dies habe ich im Script nun beseitigt.

Hätte nicht gedacht, dass es an CSS-Styles liegt.



Besten dank, hat ja super geklappt! Weiterhin bin ich positiv von diesem Forum überrascht und werde auch in Zukunft helfen und "geholfen" werden.