it-swarm.com.de

Begrenzung der Zeilenanzahl im Textbereich

Ich bin auf der Suche nach einem Javascript, das die Anzahl der Zeilen begrenzen kann (mit Zeile meine ich einen Text, der durch Drücken der Eingabetaste auf der Tastatur beendet wurde), in das der Benutzer den Textbereich eingeben kann. Ich habe ein paar Lösungen gefunden, aber sie funktionieren einfach nicht oder verhalten sich wirklich komisch ... Die beste Lösung wäre ein Jquery-Plugin, das die Arbeit erledigen kann - etwas wie CharLimit , aber es sollte in der Lage sein, es zu begrenzen Textzeilenanzahl nicht Zeichenanzahl.

34
empi

Diese may -Hilfe (wahrscheinlich am besten mit jQuery, onDomReady und unauffälligem Hinzufügen des keydown-Ereignisses zum Textbereich), wurde jedoch in IE7 und FF3 getestet:

<html>
  <head><title>Test</title></head>
  <body>
    <script type="text/javascript">
      var keynum, lines = 1;

      function limitLines(obj, e) {
        // IE
        if(window.event) {
          keynum = e.keyCode;
        // Netscape/Firefox/Opera
        } else if(e.which) {
          keynum = e.which;
        }

        if(keynum == 13) {
          if(lines == obj.rows) {
            return false;
          }else{
            lines++;
          }
        }
      }
      </script>
    <textarea rows="4" onkeydown="return limitLines(this, event)"></textarea>
  </body>
</html>

* Bearbeiten - Erklärung: Es fängt den Tastendruck ab, wenn die EINGABETASTE gedrückt wird, und fügt einfach keine neue Zeile hinzu, wenn die Zeilen im Textbereich dieselbe Nummer haben wie die Zeilen des Textbereichs. Sonst wird die Anzahl der Zeilen erhöht.

Edit # 2: Wenn man bedenkt, dass die Leute immer noch zu dieser Antwort kommen, dachte ich, ich würde sie aktualisieren, um das Einfügen, Löschen und Schneiden so gut wie möglich zu behandeln.

<html>

<head>
    <title>Test</title>
    <style>
        .limit-me {
            height: 500px;
            width: 500px;
        }
    </style>
</head>

<body>
<textarea rows="4" class="limit-me"></textarea>

<script>
    var lines = 1;

    function getKeyNum(e) {
        var keynum;
        // IE
        if (window.event) {
            keynum = e.keyCode;
            // Netscape/Firefox/Opera
        } else if (e.which) {
            keynum = e.which;
        }

        return keynum;
    }

    var limitLines = function (e) {
        var keynum = getKeyNum(e);

        if (keynum === 13) {
            if (lines >= this.rows) {
                e.stopPropagation();
                e.preventDefault();
            } else {
                lines++;
            }
        }
    };

    var setNumberOfLines = function (e) {
        lines = getNumberOfLines(this.value);
    };

    var limitPaste = function (e) {
        var clipboardData, pastedData;

        // Stop data actually being pasted into div
        e.stopPropagation();
        e.preventDefault();

        // Get pasted data via clipboard API
        clipboardData = e.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');

        var pastedLines = getNumberOfLines(pastedData);

        // Do whatever with pasteddata
        if (pastedLines <= this.rows) {
            lines = pastedLines;
            this.value = pastedData;
        }
        else if (pastedLines > this.rows) {
            // alert("Too many lines pasted ");
            this.value = pastedData
                .split(/\r\n|\r|\n/)
                .slice(0, this.rows)
                .join("\n ");
        }
    };

    function getNumberOfLines(str) {
        if (str) {
            return str.split(/\r\n|\r|\n/).length;
        }

        return 1;
    }

    var limitedElements = document.getElementsByClassName('limit-me');

    Array.from(limitedElements).forEach(function (element) {
        element.addEventListener('keydown', limitLines);
        element.addEventListener('keyup', setNumberOfLines);
        element.addEventListener('cut', setNumberOfLines);
        element.addEventListener('paste', limitPaste);
    });
</script>
</body>
</html>
23
marktucks

Wie mache ich das mit jQuery:

Binden an das keyDown-Ereignis der Textfläche.

function limitTextareaLine(e) {
    if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { 
        return false;
    }
}
15
Maciej

Diese Lösung funktioniert:

<script type="text/javascript">
    function limitTextarea(textarea, maxLines, maxChar) {
        var lines = textarea.value.replace(/\r/g, '').split('\n'), lines_removed, char_removed, i;
        if (maxLines && lines.length > maxLines) {
            lines = lines.slice(0, maxLines);
            lines_removed = 1
        }
        if (maxChar) {
            i = lines.length;
            while (i-- > 0) if (lines[i].length > maxChar) {
                lines[i] = lines[i].slice(0, maxChar);
                char_removed = 1
            }
            if (char_removed || lines_removed) {
                textarea.value = lines.join('\n')
            }
        }
    }
</script>

und Textbereich wäre

<asp:TextBox ID="myWishTB" runat="server" Height="185px" TextMode="MultiLine" 
             Style="overflow: auto;" Width="95%" 
             onkeyup="limitTextarea(this,10,80)">
</asp:TextBox>

in normalem HTML:

<textarea id="textareaID" onkeyup="limitTextarea(this,5,100)" cols="20" rows="5">   </textarea>

(Mit Jquery gemacht). Es ist nicht perfekt, kümmert sich aber um das Einwickeln. Nicht nur am Zeilenende (\ n) abhängen. 
jquery scroll -Ereignisse haben Probleme in Mozilla und Firefox, wenn die Eigenschaft "css overflow" im Textbereich nicht "auto" ist. Andernfalls entfernen Sie die entsprechenden Zeilen und setzen den Überlauf als ausgeblendet. Könnte helfen, die Größe der CSS zu ändern: keine und feste Höhe.

$('#textarea').scroll(function () {
    $(this).css("overflow", "hidden");      /* for the mozilla browser problem */
    $(this).animate({scrollTop: $(this).outerHeight()});
    while ($(this).scrollTop() > 0) {       /* for the copy and paste case */               
        lines=$(this).val().slice(0,-1);
        $(this).val(lines);
    }
    $(this).css("overflow", "auto");        /* For the mozilla browser problem */
});

Die Anzahl der sichtbaren/Anzeigezeilen für einen bestimmten Textblock hängt von den verschiedenen Browsern, verwendeten Schriftarten usw. ab. Sie müssen mindestens eine bestimmte Schriftart und Schriftgröße festlegen, um halbzuverlässig zählen zu können Zeilen anzeigen.

UPDATE: Ich sehe die Bearbeitung. Dann sollte etwas wie der Code von Kevchadders für Sie gut sein. Sie benötigen js, die Zeichen und '\ r\n's zählen und anhand eines benutzerdefinierten Grenzwerts prüfen. Wenn Sie sein Skript nicht verwenden, stellen Sie sicher, dass Sie eines verwenden, das entweder eine Zeitintervallprüfung und/oder die onKeyDown/onKeyUp -Ereignisse des Textbereichs umfasst. Dies kann der Grund sein, warum einige von Ihnen getestete Skripts sich "seltsam verhalten".

3
alphadogg

jQuery-Beispiel. Dies funktioniert sowohl beim Tippen als auch beim Einfügen.

  //Limit to # of rows in textarea or arbitrary # of rows
  $('#yourtextarea').bind('change keyup', function(event) {
    //Option 1: Limit to # of rows in textarea
    rows = $(this).attr('rows');
    //Optiion 2: Limit to arbitrary # of rows
    rows = 6;

    var value = '';
    var splitval = $(this).val().split("\n");

    for(var a=0;a<rows && typeof splitval[a] != 'undefined';a++) {
      if(a>0) value += "\n";
      value += splitval[a];
    }
    $(this).val(value);
  });
2
user158456

Dies ist im Grunde dasselbe wie die Antwort von Ivan, die jQuery verwendet. Ich habe es für ein eigenes Projekt getestet. scheint gut zu funktionieren.

<script type="text/javascript" charset="utf-8">
  $(function() 
  {
    function getLines(id)
    {
      return $('#' + id).val().split("\n").length
    }

  $('#testing').keyup(function() 
  {
    var allowedNumberOfLines = 4;

    if(getLines('testing') > allowedNumberOfLines)
    {
      modifiedText = $(this).val().split("\n").slice(0, allowedNumberOfLines);
      $(this).val(modifiedText.join("\n"));
    }
  });
});
</script>
1

Ich habe es etwas erweitert, um sogar Überlauf ohne manuellen Zeilenumbruch zu erkennen. Dies ist für Textbereiche mit fester Größe mit "Überlauf: ausgeblendet".

Im Moment verkleinert meine Lösung die Schrift, wenn sie nicht in den Textbereich passt. Und macht es wieder größer wenn möglich.

var keynum, allowedLines = 5, defaultFontSize = 13/*px*/;

$(document).ready(function() {
    $("textarea").keydown(function(e, obj) {
        if(window.event)
            keynum = e.keyCode;
        else if (e.which)
            keynum = e.which;

        if (keynum == 13 && allowedLines <= $(this).val().split("\n").length)
            return false;
    });
    $("textarea").keyup(function(e, obj) {
        // Avoid copy-paste
        if (allowedLines < $(this).val().split("\n").length) {              
            lines = $(this).val().split("\n").slice(0, allowedLines);
            $(this).val( lines.join('\n') );
        }

        // Check overflow
        if ((this.clientHeight < this.scrollHeight)) {
            while ((this.clientHeight < this.scrollHeight)) {
                currFontSize = $(this).css('font-size');
                finalNum = parseFloat(currFontSize, 11);
                stringEnding = currFontSize.slice(-2);
                $(this).css('font-size', (finalNum-1) + stringEnding);
            }
        } else if ($(this).css('fontSize') != defaultFontSize+'px')  {
            while ($(this).css('font-size') != defaultFontSize+'px') {
                // First lets increase the font size
                currFontSize = $(this).css('font-size');
                finalNum = parseFloat(currFontSize, 11);
                stringEnding = currFontSize.slice(-2);
                $(this).css('font-size', (finalNum+1) + stringEnding);
                // lets loop until its enough or it gets overflow again
                if(this.clientHeight < this.scrollHeight) {
                    // there was an overflow and we have to recover the value
                    $(this).css('font-size', currFontSize);
                    break;
                }
            }
        }
    });
});
0
vellotis