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


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
  $('#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">

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

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

Best Solution


<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>



    var lines = 10;
    var linesUsed = $('#linesUsed');

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

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

        if(e.keyCode == 13 && newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        else {
            linesUsed.css('color', '');