Zeilennummern bi HTML Formular
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufwand
bild
einbinden
file
gedanke
hintergrundbild
http
idee
justierung
numerierung
nummer
probier
problem
realisieren
schrift
textfeld
url
versuch
zahl
zeile
-
Hallo Leute!
Ich habe Folgendes Problem:
Für eine geplante Webanwendung verwende ich ein mehrzeiliges Eingabefeld. Nun hätte ich gerne, dass auf der linken Seite die Zeilenanzahl angezeigt wird. Gibt es eine Möglichkeit das ohne sehr großen Aufwand zu realisieren? Wenn es möglich ist sogar Automatisch auf die Länge des Eingabefeldes angepasst.
Gruß und danke im Vorhinein,
Alex -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hyperedit schrieb:
Nur, wenn die Nummerierung direkt im Textfeld statt findet. Sollte diese ausserhalb sein, davon geh ich aus, dann ist das ein grosser Aufwand.
Gibt es eine Möglichkeit das ohne sehr großen Aufwand zu realisieren?
EDIT: Idee, ich versuch das kurz.
Beitrag zuletzt geändert: 3.6.2014 23:11:40 von c143 -
c143 schrieb:
hyperedit schrieb:
Nur, wenn die Nummerierung direkt im Textfeld statt findet. Sollte diese ausserhalb sein, davon geh ich aus, dann ist das ein grosser Aufwand, wenn überhaupt gut lösbar.
Gibt es eine Möglichkeit das ohne sehr großen Aufwand zu realisieren?
EDIT: Idee, ich versuch das kurz.
Hm, außerhalb ginge auch, man könnte ein weiteres Textfeld hinzufügen, dem man dann einen anderen style gibt, gleiche höhe, dann die Zeilen in Feld 1 zählen und dementsprechen Zeilennummern einfügen.. -
tchab schrieb:
Genau das war grad meine Idee. :-) Geht auch mit einem div, wenn man die gleiche Schrift zuweist, hab das noch eben kurz probieren wollen.
c143 schrieb:
EDIT: Idee, ich versuch das kurz.
Hm, außerhalb ginge auch, man könnte ein weiteres Textfeld hinzufügen, dem man dann einen anderen style gibt, gleiche höhe, dann die Zeilen in Feld 1 zählen und dementsprechen Zeilennummern einfügen..
Also grundsätzlich einfach die Zeilen zählen und dann pro Zeile die Zahl in die zweite Box einfügen.
Beitrag zuletzt geändert: 3.6.2014 23:09:45 von c143 -
Es gibt noch eine andere Lösung. Die ist ein bissl Aufwendiger in der Pflege und Justierung, sollte aber auch gehen.
Einfach dem Textfeld eine Hintergrundgrafik zuweisen, die über die Zeilennummern verfügt, Mit padding-left kann man links den Platz für die Zahlen lassen.
Erstes Grundproblem ist halt die Justierung. Auf alle Fälle muß man der Textfeld-Schrift alle möglichen Werte zuweisen, damit die Browser wirklich keine freie Interpretation haben (also Schroftgröße, Zeilenhöhe usw usf). Und dann muß man die Schrift in der Grafik recht genau auf die Textboxschrift abstimmen.
Zweites Grundproblem ist die Starrheit - mal schnell die Schrift kleiner machen klappt dann nimmer. Auch wenn der Besucher die Schrift im Browser größer oder kleiner macht hat das sicher lustige Effekte.
Drittes Grundproblem ist die Anzahl der Zeilen. Die Zeilennummen werden nicht errechnet, sondern die Grafik muß über einen ausreichend großen Pool an Zahlen verfügen.
Die vor mir präsentiere Lösung ist wohl eleganter, funktioniert aber nur mit aktivierten JavaSxript, schätz ich mal. Also haben beide Ansätze ihre Achillesfersen :) -
sonok schrieb:
Ist doch sowieso im HTML und JavaScript Forum.
Die vor mir präsentiere Lösung ist wohl eleganter, funktioniert aber nur mit aktivierten JavaSxript, schätz ich mal. Also haben beide Ansätze ihre Achillesfersen :)
Ich hätte jetzt die Lösung von tchab und mir auch mit JS gelöst, da man gleich, sobald man neues in das Textfeld schreibt die Höhe und die Nummern direkt anpassen kann.
Mit PHP geht das ja nur beim neu laden der Seite, also bei einer Bestätigung eines Formulars oder ähnliches, das will man ja nicht.
Bei deiner Variante könnte man die Bilder eventuell mit JavaScript und einem Canvas generieren, aber das wäre auch Codearbeit. Nicht getestet, nur so ein Gedanke. -
Das hier sieht doch gut aus:
http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
Beitrag zuletzt geändert: 4.6.2014 8:39:59 von falseweb -
c143 schrieb:
Bei deiner Variante könnte man die Bilder eventuell mit JavaScript und einem Canvas generieren, aber das wäre auch Codearbeit. Nicht getestet, nur so ein Gedanke.
Hab es gerade eben mal genauer getestet ... meine Idee ist doch schnurz, da das Hintergrundbild in der Textbox nicht mitscrollt (und scheinbar ein background-attachment nicht greift). -
sonok schrieb:
c143 schrieb:
Bei deiner Variante könnte man die Bilder eventuell mit JavaScript und einem Canvas generieren, aber das wäre auch Codearbeit. Nicht getestet, nur so ein Gedanke.
Hab es gerade eben mal genauer getestet ... meine Idee ist doch schnurz, da das Hintergrundbild in der Textbox nicht mitscrollt (und scheinbar ein background-attachment nicht greift).
Nun, auch bei der anderen Variante muss man auf das Scrollen achten, also ist bei beiden Varianten das selbe Problem gegeben.
Wann man das ganze innerhalb des Textfeldes macht wird es einfacher, da man den Anfang der Zeile mit einer Nummer ersetzen kann, wenn diese in einem span ist kann man es auch noch schön gestalten. -
tchab schrieb:
Ja, aber falsweb hat doch eh schon die perfekte Lösung:
Nun, auch bei der anderen Variante muss man auf das Scrollen achten, also ist bei beiden Varianten das selbe Problem gegeben.
falseweb schrieb:
Das sucht doch der Themenersteller, funktioniert auch super und er muss nichts mehr gross Coden. Also wie gewünscht, wenig Aufwand.
Das hier sieht doch gut aus:
http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html -
Danke schonmal für die schnellen Antworten und die guten Ideen.
Ich werde mal versuchen es mit den zwei Textfeldern und dem zählen hinzubekommen.
Wenn es noch irgendwo Probleme gibt werde ich einfach nochmal Fragen ;) -
falseweb schrieb:
Das ist doch die perfekte Antwort, warum beachtet die niemand. Probier das doch mal aus, musst du auch nichts selbst scripten, nur einbinden. Einfacher gehts nicht, das wolltest du doch.
Das hier sieht doch gut aus:
http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
Beitrag zuletzt geändert: 5.6.2014 16:40:52 von c143 -
c143 schrieb:
falseweb schrieb:
Das ist doch die perfekte Antwort, warum beachtet die niemand. Probier das doch mal aus, musst du auch nichts selbst scripten, nur einbinden. Einfacher gehts nicht, das wolltest du doch.
Das hier sieht doch gut aus:
http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
Vielleicht will der TE etwas lernen oder jQuery vermeiden? Ginge es nur um den richtigen Link wäre der Thread Spam. ;)
Außerdem ist es doch nicht falsch, etwas selber zu versuchen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
