• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zeile des Cursors in Texarea farbig hinterlegen

T

themrdomi

Mitglied
Hallo zusammen,
ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen.
Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint.
Jedoch stelle ich es mir schwer vor, das DIV immer korrekt hinter der aktuellen Zeile zu positionieren, da ja in dem Textarea auch gescrollt werden kann. Eine fertige Lösung habe ich nirgends gefunden, jedoch stelle ich es mir in etwa so vor, wie https://jsfiddle.net/ es auch implementiert hat.
Hat jemand einen Lösungsvorschlag oder so etwas schonmal gemacht?

Gruß,
Dominik
 
Werbung:
textarea läst sich so nicht anpassen,nur der komplette Hintergrund.
Aber mit html5 und js kann man da was machen.

Zeile des Cursors in Texarea farbig hinterlegen

Zeile des Cursors in Texarea farbig hinterlegen Hallo zusammen, ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen. Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint. Jedoch stelle ich es mir schwer...
basti1012.bplaced.net basti1012.bplaced.net


Färbt sich bei Zeilenumbruch.
Nur so wie du es haben willst fällt mir gerade nix auf der schnelle ein.
Aber du siehst man könnte es so machen,nur man müsste das js noch erweitern das er die ganze Zeile einfärbt und die Ausgabe richtig rum ist.
Vieleicht hat ja da einer Zeit zu das mal anzupassen,ansonsten kucke ich später mal ob das auf deine Wünsche anpassbar ist
 
Zuletzt bearbeitet:
Werbung:
Aaron3219 schrieb:
Bei mir nicht. .
Zum Vergrößern anklicken....
Habe gelesen das es wohl auch nicht jeder Browser kann weil es auch html5 Element ist.
Aber vieleicht ist da noch ein Fehler drinne .
Aber bei mir geht es zumindest.

Hast du nee idee wie das mit textarea gehen soll? Alles was ich er goggelt habe stand das es nicht möglich ist eine Textarea Zeile einzufärben.
Bin mal gespannt auf dein Edit ,das interesiert mich jetzt auch
 
Gut, also doch ein neuer Beitrag, da ich meinen alten Beitrag mal wieder nicht mehr Bearbeiten kann...

Also folgendes Problem:
Ich find den Code nicht mehr :mad:.

Darauffolgende Probleme:
Also ich konnte den Code teilweise aus Erinnerungen nachstellen. Was jedoch Schwierigkeiten bereitet ist das Auslesen der Pointerzeile, also die Zeile, in der sich der Pointer gerade befindet.
Ich habe mal ein bisschen im Internet geschaut und bin auf Codes für Textareas gestoßen. Problem dabei ist jedoch, dass sich bei Textareas nicht einzelne Zeilen per CSS verändern lassen.
Wie @basti1012 bereits richtig gemacht hat, wäre contenteditable hier auch der richtige Ansatz.
Bei contenteditable wird bei einer neuen Zeile ein div um den Text gelegt. Man könnte dieses bei focus also mit einem span wrappen und per background-color und width also markieren.
Das einzige Problem ist also, die Zeile des Cursors auszulesen.

Irgendwelche Einfälle?
(https://stackoverflow.com/questions...ce=google_rich_qa&utm_campaign=google_rich_qa)
 
Eine Idee schon.
Wenn textarea eine feste Breite hat, müsste man mitschleife jede Buchstabenbreite zusammen rechnen und somit sollte man das Ende eine Zeile berechnen können.
Ich hatte mal ein Script gemacht
Oder
Oder
Oder

Zeile des Cursors in Texarea farbig hinterlegen lösung 2

Zeile des Cursors in Texarea farbig hinterlegen lösung 2 Hallo zusammen, ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen. Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint. Jedoch stelle ich es mir...
basti1012.bplaced.net basti1012.bplaced.net

Wo die breite jedes Buchstaben zusammen gerechnet wird. Das sollte eigentlich klappen. Aber ob, das den aufwand, wert ist, ist eine andere Frage.
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Da steht doch unten
Current row: 1
Das sind doch die Zeilen Nummern,oder nicht?
Habe das paar mal getestet und bis Zeile 70 habe ich immer eine Volle Zahl ,also ohne Komma.
Weiter als 70 habe ich nicht versucht,aber bis dahin muß ich sagen das es läuft.
Zeigt er bei dir den so komische Zahlen an?
Oder reden wir gerade aneinander vorbei?
 
basti1012 schrieb:
Da steht doch unten
Current row: 1
Das sind doch die Zeilen Nummern,oder nicht?
Habe das paar mal getestet und bis Zeile 70 habe ich immer eine Volle Zahl ,also ohne Komma.
Weiter als 70 habe ich nicht versucht,aber bis dahin muß ich sagen das es läuft.
Zeigt er bei dir den so komische Zahlen an?
Oder reden wir gerade aneinander vorbei?
Zum Vergrößern anklicken....
Mach mal ohne Text einzugeben einfach eine Leerzeile. Dann steht bei Zeile 2 eine 1 und wenn du dann wieder zurück in die eigentliche Zeile gehst, kriegst du 0.3333.

Wie auch immer, es geht eh einfacher und ich bin schon einen Schritt weiter:
https://jsfiddle.net/Aaron3219/csjjy8mv/60/

Es gibt aber noch 2 Probleme:
Bei einer neuen Zeile zählt er nicht mehr weiter. Das Problem sollte einfach zu beheben sein.
Nur kann man das Problem aufgrund der neuen Zeile gar nicht nachstellen.
Denn beim ersten Klick funktioniert es so wie es soll. Klickt man allerdings erneut auf eine andere (oder gleiche) Zeile, seht ihr ja was passiert...
 
Wow, ich hätte nicht erwartet, dass es so schwierig ist.
JSFiddle macht es tatsächlich mit Textareas, hinter die dann entsprechenend ein farbiges DIV gelegt wird.
Contenteditable scheint mir auch ein vernünftiger Ansatz zu sein, @Aaron3219 hat hier ja auch schon vernünftige Arbeit geleistet. Ich schau mal, inwiefern ich das Skript erweitern kann.

Danke!
 
Werbung:
Habe mir eben nochmal das Skript angeschaut, welches die Zeilennummer anzeigt.
http://jsfiddle.net/9QzQy/
Dass diese periodischen Zahlen angezeigt werden ist tatsächlich ein Bug, den ich recht einfach fixen kann denke
ich.
Wenn man ein Leerzeichen eingibt, wieder löscht und dann einfach nur mit Enter Zeilenumbrüche eingibt, funktioniert es. Vielleicht wäre hier dann ein weiterer Ansatz.
 
themrdomi schrieb:
Dass diese periodischen Zahlen angezeigt werden ist tatsächlich ein Bug, den ich recht einfach fixen kann denke
ich.
Zum Vergrößern anklicken....
Füge einfach am Ende, wo die Funktion intialisiert wird einfach das hinzu:
Javascript: 
$('textarea').keyup();
Das Script springt ja auf keyup an, also simulieren wir doch einfach einen. Mehr ist es nicht.

Jetzt aber mal zu den anderen Punkten:
Das oben genannte Script arbeitet mit Textareas und wenn man will, dann kann man ein div hinten rum laufen haben. Eventuell wäre es sogar einfacher, doch ich wollte (und will) unbedingt die Variante mit contenteditable ausprobieren, einfach um mal was neues zu machen und wahrscheinlich was zu lernen.

Mein Ansatz wäre hier kein div, sondern ein pre. Den Nachteil bei divs kann man bereits an dem Quellcode erkennen, wenn man mal ein paar Zeilen Text hinzufügt. Für jede Zeile fügt contenteditable bei divs einen neuen div-container hinzu, sodass der ganze Spaß nachher so aussieht:
HTML: 
<div contenteditable="true">
   Text
   <div>
      <br>
      Hinzugefügter Text
   </div>

   <div>
      <br>
      Hinzugefügter Text
   </div>
</div>
Das liegt einfach daran, dass in HTML nunmal ein Leerzeichen im Quelltext kein Leerzeichen in der eigentlichen Seite ist, selbes gilt für neue Zeilen.
Anders ist es bei <pre>. Steht bei <pre> im Quelltext eine Leerzeile, wird da nicht mit <br> und <div> Verschachtelungen gearbeitet, sondern ein Enterdruck ist dann eine Leerzeile, sodass der Code dann so aussieht:
HTML: 
<pre contenteditable="true">
 Text
Hinzugefügter Text ohne div
      Wenn ich ein paar Leerzeichen hinzufüge, werden diese auch so angezeigt
                  und so weiter.
</pre>
Ich würde also hier mit pre mitgehen. Dabei besteht eine Schwierigkeit darin, die aktuelle Codezeile auszulesen, die andere besteht darin, die arrays und so weiter wieder zu clearen und einzufügen.

Desweiteren hat pre die Möglichkeit, HTML-Code darzustellen. Mein Plan (Wie in meinem obigen Code schon im Ansatz vertreten) ist es also, um die entsprechende Zeile im Array ein div zu legen. Dieses muss bei erneutem Klicken wieder entfernt werden, usw..

Egal für welche Variante du dich entscheidest, ich werde mich trotzdem ransetzen und hoffe auf eure Mithilfe :D
 
So, ich bin jetzt noch einen Schritt weiter. Der Text verschwindet nicht mehr und die farbliche Markierung würde theoretisch auch ablaufen, wenn da nicht ein letztes Problem wäre, welches dem entgegenstehen würde.
Hier der Code:
https://jsfiddle.net/Aaron3219/ts9jooyL/61/

Also es ist bereits möglich, die Zeigerposition in einer Variable zu speichern. Es ist die Variable "caretpos".
Das ist wichtig, weil der Cursor wieder zurück auf den Anfang springt, denn es ist nötig, den ursprünglichen Text neu einzufügen.
Das letzte und einzige Problem:
Wie in Gottes Namen kriege ich die Caret-Position jetzt auf die Zahl der Variable :mad:.
Ich habe bereits im Internet nachgeschaut und nur Sachen für inputs und textareas gefunden.
Wenn wir das Problem gelöst haben, sollte es alles funktionieren.
 
Zuletzt bearbeitet:
Werbung:
Jetzt verstehe ich es auch.Wo ich mein Beispiel aus #post2 gemacht habe,wußte ich nicht wo die ganzen <br> und <div> weg kamen.
Jetzt hast du mir die erklärung gegeben ,ich dachte die ganze Zeit was läuft bei mir den verkehrt.?
Aber wieder was dazu gelernt.Ich bastel auch mal ein bischen rum,aber ich weiß das du es schneller und besser machen wirst.
Ob ich überhaupt was brauchbares hinbekomme ist sowieso noch nee frage für sich:(
 
basti1012 schrieb:
Aber wieder was dazu gelernt.Ich bastel auch mal ein bischen rum,aber ich weiß das du es schneller und besser machen wirst.
Zum Vergrößern anklicken....
Warum denn immer so negativ? Ich traue dir durchaus zu, dich hier mit einzubringen und ggf. den entscheidenden Lösungsvorschlag zu machen.
basti1012 schrieb:
ich weiß das du es schneller und besser machen wirst.
Zum Vergrößern anklicken....
Und wie du siehst, stehe ich gerade auf dem Schlauch, also nix mit besser und so!
 
Habe was gefunden/gebastelt.

Zeile des Cursors in Texarea farbig hinterlegen

Zeile des Cursors in Texarea farbig hinterlegen Hallo zusammen, ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen. Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint. Jedoch stelle ich es mir schwer...
basti1012.bplaced.net basti1012.bplaced.net
wenn man ein buchstaben drückt ist zeile bunt.
Das klappt für jede Zeile.
Geht man mit pfeiltasten zurück ,wird farbe gelöscht.
Wollte jetzt versuchen die vorderen bunten Zeilen raus zulöschen,was auch für ein bruchteil einer sekunde auch klappt.
Wenn er die gelöschte farbe halten würde,wäre immer die Zeile bunt wo man gerade schreibt.

Also im endeffekt ,auch nur eine halbe sache:(
Aber kuck mal vieleicht kannst du da was von gebrauchen
 
Zuletzt bearbeitet:
Werbung:
Ein Wort:
F*ck :D

Da will man mal was neues ausprobieren und tüffelt die ganze Zeit rum und dann kommt Sempervivum mit der simpelsten und einwandfreisten Lösung vorbei und postet sie einfach mal so im vorbeigehen...
Jetzt wo ich deine Lösung gesehen habe, ist mir direkt aufgefallen, wie kompliziert ich gedacht habe.

Dickes Lob an dich :D
In der kürze liegt die Würze und kompliziert denken ist eben auch nicht immer die beste Lösung.
 
hehe.
Ja der mann hats drauf. Wenn man den Code jetzt sieht denkt man ja warum habe ich nicht so rum gedacht,und alles so kompliziert gemacht.
Aber @Aaron3219 die nächste herausforderung kommt bestimmt:

eine kleinigkeit fehlt noch. wenn man bis zum ende geschrieben hat ,kommt man in der nächsten Spalte.Nur da springt die farbe nicht um.Ansonsten ist es Perfekt.

Edit habe noch eins im netz gefunden.Funktioniert auch ,aber das spinnt etwas,das nimmt den Focus nicht immer richtig an.Wenn erden Focus einamal gefunden hat läuft es auch

Zeile des Cursors in Texarea farbig hinterlegen lösung 2

Zeile des Cursors in Texarea farbig hinterlegen lösung 2 Hallo zusammen, ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen. Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint. Jedoch stelle ich es mir...
basti1012.bplaced.net basti1012.bplaced.net
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben