nicht angemeldet
Hallo, gleich mal vorweg: Ich weiß, dass mein Problem leicht lösbar wäre, wenn ich eine nicht-proportionale Schriftart wie Courier verwenden würde, weil dann könnte ich die Zeichen in der Textarea ganz einfach auszählen (wie hier); ich möchte aber lieber die Schriftart Arial verwenden.
Aber nun zu meinem eigentlichen Problem:
Wenn ein Nutzer Text in die Textarea schreibt, soll die Textarea bei einem automatischen (wenn eine Zeile voll ist, wird in die nächste Zeile gewechselt) oder einem manuellen (User drückt Enter) Zeilenumbruch automatisch um eine Zeile ergänzt werden. Außerdem soll, wenn der Nutzer eine Zeile löscht, die Textarea auch um eine Reihe vermindert werden etc.
Ersteres habe ich hingekriegt, ich weiß aber nicht, wie ich zweiteres umsetzen soll.
Hier mein Code (es geht eigentlich nur um die Funktion "TextareaResize()"):
<html>
<head>
<title>Test</title>
<style type="text/css">
h1 {font-family:Arial;font-size:28pt;margin-bottom:0px}
textarea {font-family:Arial;font-size:12pt;font-style:italic;color:gray;margin-top:10px}
</style>
<script type="text/javascript">
function Textarea (Nr) {
var a = document.getElementsByTagName("textarea")[0]
if (Nr != "B") {
if (a.style.color != "black") a.value = ""
a.style.color = "black"
a.style.fontStyle = "normal"
} else if (a.value == "") {
a.style.fontStyle = "italic"
a.style.color = "gray"
a.value = "Hier Text eingeben ..."
}
}
function TextareaResize() {
var a = document.getElementsByTagName("textarea")[0]
if (a.clientHeight < a.scrollHeight) {
a.rows = a.rows + (a.scrollHeight - a.clientHeight) / 19
}
}
</script>
</head>
<body>
<h1>Kleiner Chat-Test</h1>
<textarea id="test" cols="50" rows="1" onfocus="Textarea()" onblur="Textarea('B')" onkeydown="setTimeout('TextareaResize()', 10)" onkeyup="TextareaResize()">Hier Text eingeben ...</textarea>
</body>
</html>
Zur Erklärung: a.rows = a.rows + (a.scrollHeight - a.clientHeight) / 19 deshalb, weil der Differenz zwischen Scroll- und Clientheight (zumindest bei Google Chrome) immer ein Faktor von 19 ist. Wenn z. B. zwei Zeilen auf einmal mittel Strg-V eingefügt werden, ist die Differenz 38 und weil 38 / 19 2 ergibt, werden zwei Zeilen hinzugefügt.
(Man kann auch einfach a.rows = a.rows + 1 schreiben, wenn man außer Acht lässt, dass der Nutzer theoretisch mehr als eine Zeile Text auf einmal einfügen kann).
Es wäre nett, wenn mir jemand sagen könnte, was er von meinem bisherigen Ansatz hält und wie ich mein Problem lösen kann!
LG LSFR77
Der Martin
Matthias Apsel