kostenloser Webspace werbefrei: lima-city


Zeilennummern bi HTML Formular

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    hyperedit

    hyperedit hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hyperedit schrieb:
    Gibt es eine Möglichkeit das ohne sehr großen Aufwand zu realisieren?
    Nur, wenn die Nummerierung direkt im Textfeld statt findet. Sollte diese ausserhalb sein, davon geh ich aus, dann ist das ein grosser Aufwand.

    EDIT: Idee, ich versuch das kurz.

    Beitrag zuletzt geändert: 3.6.2014 23:11:40 von c143
  4. c143 schrieb:
    hyperedit schrieb:
    Gibt es eine Möglichkeit das ohne sehr großen Aufwand zu realisieren?
    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.

    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..
  5. tchab schrieb:
    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..
    Genau das war grad meine Idee. :-) Geht auch mit einem div, wenn man die gleiche Schrift zuweist, hab das noch eben kurz probieren wollen.

    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
  6. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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 :)
  7. sonok schrieb:
    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 :)
    Ist doch sowieso im HTML und JavaScript Forum. :wink: 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.
  8. 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
  9. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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).
  10. 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.
  11. tchab schrieb:
    Nun, auch bei der anderen Variante muss man auf das Scrollen achten, also ist bei beiden Varianten das selbe Problem gegeben.
    Ja, aber falsweb hat doch eh schon die perfekte Lösung:
    falseweb schrieb:
    Das hier sieht doch gut aus:
    http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
    Das sucht doch der Themenersteller, funktioniert auch super und er muss nichts mehr gross Coden. Also wie gewünscht, wenig Aufwand.
  12. Autor dieses Themas

    hyperedit

    hyperedit hat kostenlosen Webspace.

    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 ;)
  13. falseweb schrieb:
    Das hier sieht doch gut aus:
    http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
    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.

    Beitrag zuletzt geändert: 5.6.2014 16:40:52 von c143
  14. c143 schrieb:
    falseweb schrieb:
    Das hier sieht doch gut aus:
    http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html
    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.

    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.
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!