In Textarea Zeilenanzahl einbinden

matibaski · 18 Juli 2007

Hallo!
Kann man mittels Javascript ein Textfeld so formatieren, dass auf der linken Seite die Zeilenzahl steht?
Das wäre echt toll, wenn man sowas könnte.

Wenn ja, wie?
Denn ich möchte eben online einige Dateien immer ändern, denn ich habe nicht immer Lust, Dateien upzuloaden. Momentan habe ich schon alles, bis auf die Zeilenzahl, wenn mal n Fehler kommt, dass ich das schnell beheben kann.

MfG, matibaski

Frank · 18 Juli 2007

textarea ist dafür ganz sicher das falsche Element, würde nur mit n paar Tricks funktionieren

matibaski · 19 Juli 2007

Und wie könnte ich sonst etwas machen, indem ein Feld ist, wo eine Datei eingefügt ist, und man Zeilenzahle sehen kann?

Wie würde das mit den Tricks funktionieren?

MFG, matibaski

Frank · 19 Juli 2007

du legst mit position absolute ne div über die textarea und ließt per javascript aus, wieviel zeilen die textarea hat, und schribst sie mit gliecher schriftgröße in die div. Problematisch wirds dann aber wenn man die textarea scrollt

Hab mal ein Beispiel gecoded

PHP:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function filllines()
{
  var text = document.getElementById('text').value
  var text2 = text.split("\n")
  var length = text2.length
  for(i = 1;i<=length;i++)
  {
    document.getElementById('zeilen').innerHTML += i+'<br />'
  }
  height = document.getElementById('zeilen').offsetHeight;
  document.getElementById('text').style.height = height;

}
-->
</script>
<style type="text/css">
<!--
#text {
width : 100%;
padding-left : 30px;
border : 1px solid black;
font-family : verdana;
font-size : 12px;
padding-top : 2px;
line-height : 14px;
}
#zeilen {
z-index : 99;
border : 1px solid black;
position : absolute;
top : 16;
left : 10;
width : 30px;
padding-left: 4px;
font-family : verdana;
font-size : 12px;
padding-top : 2px;
line-height : 14px;
}
-->
</style>
</head>
<body onload="filllines()">
<textarea name="text" id="text">
<?php echo file_get_contents("http://www.example.de"); ?>
</textarea>
<div id="zeilen">

</div>
</body>
</html>

Also im MSIE geht es, im MF habe ich grad gesehen ist es nicht der hit

matibaski · 19 Juli 2007

Danke für den Ansatz.
Ich probiere mal ein wenig rum damit.

Wenn ichs schaffe, poste ich Code.

MfG, matibaski

Commodore · 19 Juli 2007

Hier eine (vom Style) verbesserte Version des Codes von Frank:

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function filllines()
{
  var text = document.getElementById('text').value
  var text2 = text.split("\n")
  var length = text2.length
  for(i = 1;i<=length;i++)
  {
    document.getElementById('zeilen').innerHTML += i+'<br />'
  }
  height = document.getElementById('zeilen').offsetHeight;
  document.getElementById('text').style.height = height;

}
-->
</script>
<style type="text/css">
<!--
#text {
width : 100%;
padding-left:36px;
padding-top:2px;
border : 1px solid black;
font-family : verdana;
font-size : 12px;
line-height : 14px;
}
#zeilen {
z-index : 99;
border : 1px solid black;
position : absolute;
top:1px;
left:0px;
width : 30px;
padding-left: 4px;
font-family : verdana;
font-size : 12px;
padding-top : 2px;
line-height : 14px;
}
-->
</style>
</head>
<body onload="filllines()">
<div style="position:relative;">
<textarea name="text" id="text">
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text</textarea>
<div id="zeilen">

</div>
</div>
</body>
</html>

Wie bereits von Frank gesagt, das ganze wird problematisch sobald der div scrollen soll. Das geht afaik nicht.

matibaski · 19 Juli 2007

Ich habe einfach statt das Div ein 2. textfeld genommen und beide gefloatet.
Beim scrollen wird das andere ja auch scrollbar, aber es wird ja nicht gescrollt, sondern nur auf dem Hauptfenster.

Kann man das mit JS irgendwie so konfigurieren, dass wenn das rechte gescrollt wird, dass das linke auch scrollt?
Wäre toll.

Also sieht so aus:

PHP:

<?php // Gegen zeilenumbruch ?>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function filllines()
{
  var text = document.getElementById('text').value
  var text2 = text.split("\n")
  var length = text2.length
  for(i = 1;i<=length;i++)
  {
    document.getElementById('zeilen').innerHTML += i+'\n'
  }
}
//-->
</script>
<style type="text/css">
<!--
#zeilen {
width:50px;
height:400px;
font-family:Verdana;
font-size:12px;
line-height : 14px;
float:left;
}
#text {
height : 400px;
width : 800px;
font-family : verdana;
font-size : 12px;
line-height : 14px;
float:left;
}
-->
</style>
</head>
<body onload="filllines()">
<textarea id="zeilen"></textarea>
<textarea name="text" id="text">
d
d
d
ddddd
d
d
d
d
ddddd

ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
ddddd
</textarea>
</body>
</html>

MfG,matibaski

edit:
Kann man am Code noch was ändern, dass wenn ich eine neue Zeile mache, mit Enter, dass diese gezählt wird?
Also es wird immer nur dann eine neue Zeile angezeigt, wenn ich die Seite aktualisiere.

edit:
Dein Code ist eig. auch sehr gut Commodore.
Ich probiere mal mit dem herum.

MfG, matibaski

Commodore · 19 Juli 2007

Imho ist es nich möglich, die Textarea mitscrollen zu lassen. Das mit dem Zeilenumbruch ist recht einfach, dann musst du in die Textarea ein onkeyup="fillines()" einfügen.

/E: Und dann müsstest du folgendes Code noch an den Anfang der Funktion tun:

Code:

document.getElementById('zeilen').innerHTML = "";

matibaski · 19 Juli 2007

Danke, funzt eig. schon, aber er listet dann alle Zeilen immer wieder auf, also es ladet das ganze immer einmal dazu, statt nur eine Zeile.

Kann man das mit onload bei <body> nur einmal laden lassen?
Gibts da n' Attribut oder muss man das im JS machen?

MfG, matibaski

edit:
Auch wenn ich es bei body wegnehme und nur bei Textarea onkeypress verwende, listet es alle immer neu auf.
Was kann man dagegen machen?

edit:
Mit innerHTML gehts.
Doch kann man das mit dem Body irgendwie verwirklichen?
Das mit den Scrollen ist noch wurscht, aber einfach, dass es der Body beim Seitenaufruf nur einmal lädt.

MfG, matibaski

edit3:

Es funzt jetzt, doch es erscheint trotzdem noch ne Scrollbar.
Und wenn ich irgendwo wo text ist enter klicke, dan verschwindet der Teil und erscheint erst wieder, wenn ich nach oben gehe mit dem Pfeil oder Backspace drücke.

Nunha, ich probiere aus.
Hier is noch die Testphase:
http://matibaski.paradoxe.de/Web/test2.php

Commodore · 19 Juli 2007

Was meinst du damit? Damit es jetzt keine Verwirrung gibt, das ist der Code den ich momentan habe:

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function filllines()
{
  document.getElementById('zeilen').innerHTML = "";
  var text = document.getElementById('text').value
  var text2 = text.split("\n")
  var length = text2.length
  for(i = 1;i<=length;i++)
  {
    document.getElementById('zeilen').innerHTML += i+'<br />'
  }
  height = document.getElementById('zeilen').offsetHeight;
  document.getElementById('text').style.height = height;

}
-->
</script>
<style type="text/css">
<!--
#text {
width : 100%;
padding-left:36px;
padding-top:2px;
border : 1px solid black;
font-family : verdana;
font-size : 12px;
line-height : 14px;
overflow:hidden;
}
#zeilen {
z-index : 99;
border : 1px solid black;
position : absolute;
top:1px;
left:0px;
width : 30px;
padding-left: 4px;
font-family : verdana;
font-size : 12px;
padding-top : 2px;
line-height : 14px;
}
-->
</style>
</head>
<body onload="filllines()">
<div style="position:relative;">
<textarea name="text" id="text" onkeyup="filllines()">
text text
text text
</textarea>
<div id="zeilen">

</div>
</div>
</body>
</html>

matibaski · 19 Juli 2007

Danke.
Mittlerweile macht es mir nix aus, dass das Textarea nicht scroll.
Mein Problem:
Ich habe das nun in mein Script eingebaut, doch bei der 96. Zeile bricht es einfach ab.
Ich weiss nicht, wieso.

Ist da etwas nicht eingestellt?

Commodore · 19 Juli 2007

Hmm, das Script ist wohl zu rechenintensiv. Bei mir fängt es ca. ab der 60. Zeile an abzuschmiereen.

Liegt wohl an die vielen Aufrüfen von .innerHTML, so sollte es funktionieren:

PHP:

function filllines()
{
  document.getElementById('zeilen').innerHTML = "";
  var text = document.getElementById('text').value
  var text2 = text.split("\n")
  var length = text2.length;
  var zahlen = "";
  for(i = 1;i<=length;i++)
  {
    zahlen += i+'<br />'
  }
  document.getElementById('zeilen').innerHTML = zahlen;
  height = document.getElementById('zeilen').offsetHeight;
  document.getElementById('text').style.height = height;

}

Bei mir funktionierts bis 200 ohne Probleme, weiter hab ich nicht getestet.

Frank · 19 Juli 2007

Habe nun eine "alles" beachtende Version geschafft.

Problem Scrollen:
Die Textareas werden mittels Javascript so hoch gezogen, dass es nie zum scrollen kommt. Damit das ganze aber nicht die ganze Website sprengt, ist das Konstrukt in einer div mit overflow:auto; und einer Höhe von 500 px.

Problem umbrechende Zeilen:
Das andere Problem sind umbrechende Zeilen. Wenn eine zu lange Zeile automatisch umbricht weil die textarea nicht breit genug ist, stimmt ja die Zeilenangabe links nicht mehr. Also muss man das umbrechen verhinden -> wrap="off"

Somit hast du jetzt eine 100% funktionierende Version ;) - getestet in MSIE & FF

PHP:

BERSSERER CODE UNTEN

andererseits ist er sehr langsam beim einfügen von text durch die dauernden key-events. Das versuche ich noch zu beheben

//EDIT

Habe nun das Performance Problem gelößt indem filllines() nur beim drücken von Enter/Return oder Backspace aufgerufen wird

PHP:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function filllines()
{
  document.getElementById('a').value = "";
  var text = document.getElementById('b').value.split("\n");
  var h = 20;
  for(i = 1;i<=(text.length+2);i++)
  {
    document.getElementById('a').value += i+"\n"
    h = h+16
  }
  document.getElementById('a').style.height = h;
  document.getElementById('b').style.height = h;
}
function enter(e)
{
  if(e)
    e = e
  else
    e = window.event
  if(e.which)
    var keycode = e.which
  else
    var keycode = e.keyCode
  if(keycode == 13 || keycode == 8)
    filllines()
}
</script>
<style type="text/css">
#a,#b {
border : 1px solid black;
height : 200px;
font-size : 12px;
font-family : verdana;
line-height : 14px;
float : left;
}
#a {
width : 60px;
border-right : 0;
}
#b {
width : 500px;
}
#scroll {
height : 500px;
width : 800px;
overflow : auto;
}
</style>
</head>
<body onload="filllines();">
<div id="scroll">
<textarea id="a"></textarea>
<textarea id="b" wrap="off" onkeypress="enter(event)"><?php echo file_get_contents("http://www.html.de"); ?></textarea>
</div>
</body>
</html>

matibaski · 19 Juli 2007

Danke.
Mann der Code funktioniert perfekt.
Ja das sind schon sehr extreme Ladezeiten.

Kann man das mit einem quasi "preloader" korrigieren?
Ich weiss ja nicht, wie man das machen kann, da ich JS nicht sehr gut kann.
Ich sollte JS mal aktiv lernen, bevor ich mit Java weitermache. -.-

Hat jemand ne gute Seite?
selfhtml macht alles viel zu umständlich in den ersten paar Seiten.
Falls jemand JS Tuto für Fortgeschrittene kennt, dann bitte ich den, den Link zu posten.

Ich Google inzwischen mal weiter nach Tuts für Fortgeschrittene.

MfG, matibaski

In Textarea Zeilenanzahl einbinden

matibaski

Guest

Frank

Neues Mitglied

matibaski

Guest

Frank

Neues Mitglied

matibaski

Guest

Commodore

Guest

matibaski

Guest

Commodore

Guest

matibaski

Guest

Commodore

Guest

matibaski

Guest

Commodore

Guest

Frank

Neues Mitglied

matibaski

Guest

Neueste Beiträge