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

Kudos to anyone who can help!

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

Thanks all!



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


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


jQuery('document').on('keyup change', 'textarea', function(e){

        var maxLines = jQuery(this).attr('data-max');        
        newLines = $(this).val().split("\n").length;


        if(newLines >= maxLines) {
            lines = $(this).val().split("\n").slice(0, maxLines);
            var newValue = lines.join("\n");
            return false;


A much ugly , but somehow working example specify rows of textarea

<textarea rows="3"></textarea>

and then in js

   $("textarea").on('keydown keypress keyup',function(e){
       if(e.keyCode == 8 || e.keyCode == 46){
           return true;
       var maxRowCount = $(this).attr("rows") || 2;
        var lineCount = $(this).val().split('\n').length;
        if(e.keyCode == 13){
            if(lineCount == maxRowCount){
                return false;
        var jsElement = $(this)[0];
        if(jsElement.clientHeight < jsElement.scrollHeight){
            var text = $(this).val();
            text= text.slice(0, -1);
            return false;



<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', '');



For the React fans out there, and possibly inspiration for a vanilla JS event handler:

onChange={({ target: { value } }) => {
    const returnChar = /\n/gi
    const a = value.match(returnChar)
    const b = title.match(returnChar)
    if (value.length > 80 || (a && b && a.length > 1 && b.length === 1)) return
    dispatch(setState('title', value))

This example limits a textarea to 2 lines or 80 characters total.

It prevents updating the state with a new value, preventing React from adding that value to the textarea.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.