[Javascript]Zeilen einer Textarea begrenzen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzahl
begrenzung
beispiel
belieben
code
dank
filter
funktion
krieg
null
pfeiltaste
sagen
teddy
test
textfeld
url
wissen
zeichen
zeile
zeugs
-
Hey
ich auf einer webseite ein paar textareas begrenzen. wichtig sind dabei die zeichen pro zeile und die anzahl der zeilen.
ich such schon den halben tag nach einem script (da ich fast keine ahnung von javascript habe).
wär nett wenn einer von euch einen denk anstoß oder sogar eine fertige lösung hätte.
Lg
Raff
Beitrag zuletzt geändert: 6.9.2011 16:57:51 von raff -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
var count= 1; var chars= 3; $('#mytext').keypress(function() { var v = $(this).val(); var vl = v.replace(/(\r\n|\n|\r)/gm,"").length; if (parseInt(vl/count) == chars) { $(this).val(v + '\n'); count++; } });
Benötigt JQuery.
Beitrag zuletzt geändert: 6.9.2011 17:08:36 von fabo -
fabo schrieb:
var count= 1; var chars= 3; $('#mytext').keypress(function() { var v = $(this).val(); var vl = v.replace(/(\r\n|\n|\r)/gm,"").length; if (parseInt(vl/count) == chars) { $(this).val(v + '\n'); count++; } });
Benötigt JQuery.
okay danke erstmal für die antwort.
ich habe es jetzt so eingebunden:
var count= 1; var chars= 1; $('#artikel_subline2').keypress(function() { var v = $(this).val(); var vl = v.replace(/(\r\n|\n|\r)/gm,"").length; if (parseInt(vl/count) == chars) { $(this).val(v + '\n'); count++; } }); <textarea name="artikel_subline" id="artikel_subline2" class="textareaRight" style="height:28px;"></textarea>
es passiert aber nichts.
(jQuery ist auch drin) -
Also ich sehe dort kein Script, sondern ein Text...
Du musst <script> und </script> mit einbunden
Des weiteren musst du dann auch dem textfelden diese zuweisung erteilen..
Du hast dort im Moment stehen -> Textfeld hat nur so viele Zeichen...
Dort müsste aber stehen -> DIESES Textfeld hat nur so viele Zeichen... .
Wenn du folgen kannst, dann müsstest du nun wissen, warum es nicht funktioniert und die Lösung dazu wäre, dein Textfeld das natürlich zu sagen, dass es nur so viele Zeichen Zählen soll, bis das Script stop sagt..
Das ganze sieht ca. so aus...
<textarea name="txtText" id="txtText" rows="4" cols="30" onKeyDown="charCounter('txtText', 500, 'charCount');" onKeyUp="charCounter('txtText', 500, 'charCount');" onChange="charCounter('txtText', 500, 'charCount');"> </textarea> -
danke für die antwort kill-a-teddy!
die script tags habe ich nicht mit kopiert weil es meiner meinung nach selbst verständlich ist.
bei jQuery funktioniert das aber so ein bischen anders mit dem funktion aufrufen.
wenn ich die funktion so änder:
$('#artikel_subline2').keypress(function() { alert("test"); });
wird "test" ausgegeben immer wenn ich etwas in mein textfeld schreibe. -
raff schrieb:
wenn ich die funktion so änder:
$('#artikel_subline2').keypress(function() { alert("test"); });
wird "test" ausgegeben immer wenn ich etwas in mein textfeld schreibe.
Ja das liegt am "alert" Befehl... Kannst du ja nach belieben ändern, du scheinst das nötige Wissen zu haben (;
PS: Bitte bitte, aber Fabo postete dir den Code, ich nur den Lösungsansatz (; -
kill-a-teddy schrieb:
raff schrieb:
wenn ich die funktion so änder:
$('#artikel_subline2').keypress(function() { alert("test"); });
wird "test" ausgegeben immer wenn ich etwas in mein textfeld schreibe.
Ja das liegt am "alert" Befehl... Kannst du ja nach belieben ändern, du scheinst das nötige Wissen zu haben (;
PS: Bitte bitte, aber Fabo postete dir den Code, ich nur den Lösungsansatz (;
Ich glaub du hast das prob falsch verstanden ;) das mit dem alert("test"); habe ich nur gemacht um zu testen ob die funktion aus fabos code auch aufgerufen wird weil du gesagt hast das ich die funktion garnicht aufgerufen habe.
fabos funktion macht allerdings nichts :(
hat noch jemand eine idee? is wirklich dringend -
Jaa icke hätte etwas... Ich hab aber leider null Zeit für lange erklärungen, das würde ich dann Morgen machen, wenn du erlaubst...
Also hier der code für den Head bereich:
<script type="text/javascript"> // globale Zählervariable var charsToGo; function charCounter(charInputSrcName, maxCharCount, outputTargetName) { // Zugriffsvariablen festlegen var charInputSrc = document.getElementById(charInputSrcName); var outputTargetSrc = document.getElementById(outputTargetName); if (charInputSrc != null) { // Länge des Feldinhaltes prüfen if (charInputSrc.value.length <= maxCharCount) { // Anzahl Restzeichen berechnen und Zeichenanzeige aktualisieren charsToGo = maxCharCount - charInputSrc.value.length; outputTargetSrc.innerHTML = '(' + charsToGo + ' Zeichen)'; } else // Eingegebenes Zeichen wieder abschneiden charInputSrc.value = charInputSrc.value.substring(0, maxCharCount); charsToGo = maxCharCount - charInputSrc.value.length; } } </script>
Und der Code für dein Textfeld:
<textarea name="txtText" id="txtText" rows="4" cols="30" onKeyDown="charCounter('txtText', 500, 'charCount');" onKeyUp="charCounter('txtText', 500, 'charCount');" onChange="charCounter('txtText', 500, 'charCount');"></textarea>
Das wäre dann die Lösung ohne Jquerry aber via. JS -
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Beispiel</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> <style type='text/css'> textarea{ height:400px; } </style> <script type='text/javascript'> //<![CDATA[ $(window).load(function () { var count = 1; var chars = 10; // Zeichen pro Zeile $('#artikel_subline2').keypress(function () { var v = $(this).val(); var vl = v.replace(/(\r\n|\n|\r)/gm, "").length; if (parseInt(vl / count) == chars) { $(this).val(v + '\n'); count++; } }); }); //]]> </script> </head> <body> <textarea name="artikel_subline" id="artikel_subline2" class="textareaRight" style="height:28px;"></textarea> </body> </html>
In diesem Beispiel ist die Länge der Zeichen pro Zeile in der Textarea auf 10 begrenzt. Ich habe die entsprechende Stelle kommentiert, damit du den Wert problemlos ändern kannst.
Je nachdem, was du damit vorhast, könnte man das auch mit PHP machen. Dann sind die Zeichen pro Zeile relativ egal und Javascript wird auch nicht benötigt. PHP prüft dann einfach die angegebenen Daten und macht nach X-Zeichen einen entsprechenden Umbruch.
Das könnte dann in etwa so aussehen:
<?php $artikel_subline = strip_tags($_POST['artikel_subline']); $max_length = 10; // Zeichen pro Zeile $lines = explode("\n", $artikel_subline); for($i = 0; $i < count($lines); $i++) { $lines[$i] = rtrim($lines[$i]); $lines[$i] = (strlen($lines[$i]) <= $max_length ? $lines[$i] : substr($lines[$i], 0, $max_length)); } $artikel_subline = implode("\n", $lines); ?>
Beitrag zuletzt geändert: 8.9.2011 16:50:46 von fabo -
Ist wie immer eine excellenter Code, vom fabo.. Fehlt nur noch, die Begrenzung der Zeilen!
-
alles kla, danke :)
hat mir schon ein bischen weiter geholfen.
mein code sieht jetzt so aus:
function rowCounter(charInputSrcName, maxChars, MaxRows) { var charInputSrc = document.getElementById(charInputSrcName); areaLenght = charInputSrc.value.length; charsPerLine = maxChars / MaxRows; n = charInputSrc.value; anz = n.match(/\n/g); if (charInputSrc != null) { for (var i = 0; i <= MaxRows; i++) { if (areaLenght / i == charsPerLine) { charInputSrc.value = charInputSrc.value + "\n"; } } if (anz.length <= MaxRows) { charInputSrc.value = charInputSrc.value.substring(0, maxChars); } } }
2 Probleme hab ich aber leider noch.
Ich müsste noch diverse KeyCodes ausschließen (zb backspace, shift usw)
und ab der 2. zeile werden zu wenig zeichen pro zeile eingegeben. (immer 1 zu wenig)
---------------------
EDIT:
function rowCounter(charInputSrcName, maxChars, MaxRows, event) { var charInputSrc = document.getElementById(charInputSrcName); areaLenght = charInputSrc.value.length; charsPerLine = maxChars / MaxRows; n = charInputSrc.value; anz = n.match(/\n/g); event = event || window.event; pressedKey = event.keyCode; if (charInputSrc != null) { for (var i = 0; i <= MaxRows; i++) { if (areaLenght / i == charsPerLine) { if(pressedKey != 37) //Pfeiltasten Filter { if(pressedKey != 38) { if(pressedKey != 39) { if(pressedKey != 40) { if (pressedKey != 8) //Backspace Filter { if(pressedKey != 46) // ENF Filter { charInputSrc.value = charInputSrc.value + "\n"; } } } } } } } } if (anz.length <= MaxRows) { if(pressedKey != 37) //Pfeiltasten Filter { if(pressedKey != 38) { if(pressedKey != 39) { if(pressedKey != 40) { if (pressedKey != 8) //Backspace Filter { if(pressedKey != 46) // ENF Filter { charInputSrc.value = charInputSrc.value.substring(0, maxChars); } } } } } } } } }
Jetzt werden schonmal diverse tasten rausgefiltert.
aber ich versteh ehrlich gesagt nicht warum ab der 2. zeile ein zeichen weniger zugelassen wird. Weiß da jemand eine lösung?
achja paralel wollt ich (d)ein php script laufen lassen um sicher zu gehn. danke nochmal für die hilfe :)
Beitrag zuletzt geändert: 9.9.2011 16:00:36 von raff -
kill-a-teddy schrieb:
Ist wie immer eine excellenter Code, vom fabo.. Fehlt nur noch, die Begrenzung der Zeilen!
Nö. Wenn ich sage, ich möchte eine Textarea haben, die aus maximal 20 Zeilen besteht, wobei jede Zeile auf 10 Zeichen begrenzt sein soll, dann füge ich der Textarea das Attribut maxlength=200 bei.
Dadurch ist die Textarea auf 200 Zeichen begrenzt, wobei pro Zeile maximal 10 Zeichen zu finden sind, was letztlich einer maximale Zeilenanzahl von 20 entspricht ;)
@raff
Um das jetzt nochmal auf den Schirm zu kriegen: Du möchtest eine Textarea, in der die Anzahl der Zeichen pro Zeile begrenzt ist. Zudem möchtest du die Eingabe spezieller Zeichen verhindern.
Richtig?
Zu deinem Keycode-Zeugs: Ich würde es weniger mit Keycodes (aufgrund der Browserkompabilitäten), als mit Regular Expressions machen.
EDIT:
Okay... Rein logisch gesehen funktioniert die Begrenzung mittels maxlength nicht. Ich überleg mir eben was und melde mich dann ;)
EDIT:
So ists besser...
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Beispiel</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> <style type='text/css'> textarea{ height:500px; } </style> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var count = 1, charsPerLine = 10, // Zeichen pro Zeile maxLines = 20; // Anzahl Zeilen $('#artikel_subline2').keydown(function (e) { var v = $(this).val(), vl = v.replace(/(\r\n|\n|\r)/gm, '').length, lineCount = $(this).val().split("\n").length; if (parseInt(vl / count) >= charsPerLine) { if (lineCount >= maxLines) { return false; } $(this).val(v + "\n"); count += 1; } }); }); //]]> </script> </head> <body> <textarea name="artikel_subline" id="artikel_subline2" class="textareaRight"></textarea> </body> </html>
Aber das Ganze ist noch voller kleiner Probleme, zu denen mir zzt. keine Lösung einfällt.
Beitrag zuletzt geändert: 9.9.2011 18:37:07 von fabo -
fabo schrieb:
kill-a-teddy schrieb:
Ist wie immer eine excellenter Code, vom fabo.. Fehlt nur noch, die Begrenzung der Zeilen!
Nö. Wenn ich sage, ich möchte eine Textarea haben, die aus maximal 20 Zeilen besteht, wobei jede Zeile auf 10 Zeichen begrenzt sein soll, dann füge ich der Textarea das Attribut maxlength=200 bei.
Dadurch ist die Textarea auf 200 Zeichen begrenzt, wobei pro Zeile maximal 10 Zeichen zu finden sind, was letztlich einer maximale Zeilenanzahl von 20 entspricht ;)
@raff
Um das jetzt nochmal auf den Schirm zu kriegen: Du möchtest eine Textarea, in der die Anzahl der Zeichen pro Zeile begrenzt ist. Zudem möchtest du die Eingabe spezieller Zeichen verhindern.
Richtig?
Zu deinem Keycode-Zeugs: Ich würde es weniger mit Keycodes (aufgrund der Browserkompabilitäten), als mit Regular Expressions machen.
EDIT:
Okay... Rein logisch gesehen funktioniert die Begrenzung mittels maxlength nicht. Ich überleg mir eben was und melde mich dann ;)
EDIT:
So ists besser...
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Beispiel</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> <style type='text/css'> textarea{ height:500px; } </style> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var count = 1, charsPerLine = 10, // Zeichen pro Zeile maxLines = 20; // Anzahl Zeilen $('#artikel_subline2').keydown(function (e) { var v = $(this).val(), vl = v.replace(/(\r\n|\n|\r)/gm, '').length, lineCount = $(this).val().split("\n").length; if (parseInt(vl / count) >= charsPerLine) { if (lineCount >= maxLines) { return false; } $(this).val(v + "\n"); count += 1; } }); }); //]]> </script> </head> <body> <textarea name="artikel_subline" id="artikel_subline2" class="textareaRight"></textarea> </body> </html>
Aber das Ganze ist noch voller kleiner Probleme, zu denen mir zzt. keine Lösung einfällt.
danke erstmal das du dir so viele gedanken machst :)
ich brauch einen code der die zeilenanzahl und die zeichen pro zeile begrenzt. (dank den denkanstoß von teddy jetzt fast gelöst)
das einzige problem das ich jetzt noch habe ist das ab der 2. zeile ein zeichen zu wenig eingegeben wird.
zb:
Das ist ein test text Das ist ein test tex t Das ist ein test te xt Das ist ein test t ext
ich gehe davon aus das das an dem \n liegt aber ich wei nich genau wie man das rausfiltern kann.
die keycodes sind dafür da pfeiltasten und backspace zuzulassen auch wenn das textarea "voll" ist. -
ich brauch einen code der die zeilenanzahl und die zeichen pro zeile begrenzt
Hm... Was hab ich denn da oben zusammengestellt, wenn's nicht das ist, was du suchst?! Mein Code beschränkt die maximale Anzahl der Zeichen pro Zeile auf 10 und die maximale Anzahl der Zeilen auf 20.
Der Code muss lediglich nochmal überarbeitet werden, da es Probleme beim Backspace gibt.
Beitrag zuletzt geändert: 12.9.2011 14:17:48 von fabo -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
