Question

151

Limit number of lines in textarea and Display line count using jQuery

rated 0 times [ 152] [ 1] / answers: 1 / hits: 68639 / 13 Years ago, tue, june 28, 2011, 12:00:00

Using jQuery I would like to:

Limit the number of lines a user can enter in a textarea to a set number

Have a line counter appear that updates number of lines as lines are entered

Return key or n would count as line

$(document).ready(function(){

  $('#countMe').keydown(function(event) {

    // If number of lines is > X (specified by me) return false

    // Count number of lines/update as user enters them turn red if over limit.



  });   

});





<form class="lineCount">

  <textarea id="countMe" cols="30" rows="5"></textarea><br>

  <input type="submit" value="Test Me">

</form>



<div class="theCount">Lines used = X (updates as lines entered)<div>

For this example lets say limit the number of lines allowed to 10.

Answers

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

casandra

Add To Favorites

Follow

Total Points: 334

Total Questions: 93

Total Answers: 104

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 13 Years ago kadinl · Accepted Answer

html:

<textarea id=countMe cols=30 rows=5></textarea>

<div class=theCount>Lines used: <span id=linesUsed>0</span><div>

js:

$(document).ready(function(){



    var lines = 10;

    var linesUsed = $('#linesUsed');



    $('#countMe').keydown(function(e) {



        newLines = $(this).val().split(n).length;

        linesUsed.text(newLines);



        if(e.keyCode == 13 && newLines >= lines) {

            linesUsed.css('color', 'red');

            return false;

        }

        else {

            linesUsed.css('color', '');

        }

    });

});

fiddle:
http://jsfiddle.net/XNCkH/17/