Question

133

Limiting number of lines in textarea

rated 0 times [ 140] [ 7] / answers: 1 / hits: 94205 / 16 Years ago, tue, february 17, 2009, 12:00:00

I'm looking for a javascript that can limit the number of lines (by line I mean some text ended by user pressing enter on the keyboard) the user is able to enter in textarea. I've found some solutions but they simply don't work or behave really weird.
The best solution would be a jquery plugin that can do the work - something like CharLimit, but it should be able to limit text line count not character count.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

noel

Add To Favorites

Follow

Total Points: 49

Total Questions: 90

Total Answers: 104

Location: Aland Islands

Member since Wed, Nov 17, 2021

3 Years ago

noel questions

1 Retrieve localStorage data using Flask

Tue, Oct 6, 20, 00:00, 4 Years ago

1 Countdown timer - make it persistent even after refresh or reload

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Material-table TypeError: Cannot add property tableData, object is not extensible

Wed, Jan 8, 20, 00:00, 4 Years ago

1 Action Icons appearing as plain text

Mon, Jul 29, 19, 00:00, 5 Years ago

1 How to remove ? (question mark) from url when it is not followed by any parameters?

Fri, Jun 28, 19, 00:00, 5 Years ago

View All

answered 16 Years ago joaquin · Accepted Answer

This might help (probably be best using jQuery, onDomReady and unobtrusively adding the keydown event to the textarea) but tested in IE7 and FF3:

<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>

*Edit - explanation: It catches the keypress if the ENTER key is pressed and just doesn't add a new line if the lines in the textarea are the same number as the rows of the textarea. Else it increments the number of lines.

Edit #2: Considering people are still coming to this answer I thought I'd update it to handle paste, delete and cut, as best as I can.

<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(/rn|r|n/)

                .slice(0, this.rows)

                .join(n );

        }

    };



    function getNumberOfLines(str) {

        if (str) {

            return str.split(/rn|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>