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

Question

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.

Answer 1

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/

Answer 2

Here is little improved code. In previous example you could paste text with more lines that you want.

HTML

<textarea data-max="10"></textarea> <div class="theCount">Lines used: <span id="linesUsed">0</span></div> 

JS

jQuery('document').on('keyup change', 'textarea', function(e){          var maxLines = jQuery(this).attr('data-max');                 newLines = $(this).val().split("\n").length;          console.log($(this).val().split("\n"));          if(newLines >= maxLines) {             lines = $(this).val().split("\n").slice(0, maxLines);             var newValue = lines.join("\n");             $(this).val(newValue);             $("#linesUsed").html(newLines);             return false;         }      });