kostenloser Webspace werbefrei: lima-city


[Javascript]Zeilen einer Textarea begrenzen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

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

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

  3. 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
  4. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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)
  5. 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>
  6. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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.
  7. 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 (;
  8. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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
  9. 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 + '&nbsp;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
  10. <!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
  11. Ist wie immer eine excellenter Code, vom fabo.. Fehlt nur noch, die Begrenzung der Zeilen!
  12. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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
  13. 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
  14. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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.
  15. 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
  16. 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!