ArticleZip > Limit Number Of Lines In Textarea And Display Line Count Using Jquery

Limit Number Of Lines In Textarea And Display Line Count Using Jquery

Textareas are fantastic for allowing users to input large amounts of text on a website. However, sometimes you want to control the number of lines users can enter. In this tutorial, we will explore how to limit the number of lines in a textarea field and, as a bonus, display the current line count using jQuery.

First, let's dive into limiting the number of lines in a textarea. To achieve this, we will utilize a combination of HTML, CSS, and jQuery.

In your HTML file, create a textarea element:

Html

<textarea id="text-area" rows="4"></textarea>

By setting the `rows` attribute to a desired value, you can control the visible height of the textarea.

Next, to restrict the number of lines users can enter, we will use some CSS magic:

Css

#text-area {
    white-space: pre-line;
    overflow-wrap: break-word;
}

The `white-space: pre-line;` property allows the textarea to break lines at newline characters, ensuring that text is displayed in multiple lines. Meanwhile, `overflow-wrap: break-word;` prevents long words from overflowing the textarea.

Now, here comes the exciting part – using jQuery to monitor and display the current line count as users type. By implementing the following jQuery script, you can achieve this functionality:

Javascript

$('#text-area').on('input', function() {
    var lines = $(this).val().split('n').length;
    $(this).attr('rows', lines &gt; 4 ? lines : 4);
    $('#line-count').text('Lines: ' + lines);
});

In this script, we attach an `input` event listener to the textarea. When users type or delete text, the function calculates the number of lines by splitting the textarea's value at each newline character. We then dynamically adjust the number of visible rows based on the line count and update the line count display accordingly.

Don't forget to include an element where the line count will be displayed:

Html

<p id="line-count">Lines: 1</p>

And that's it! You've successfully learned how to limit the number of lines in a textarea and display the line count using jQuery. Feel free to customize the number of initial rows, styling, or additional features to suit your project's needs.

This handy feature can enhance user experience by providing clear feedback on the input length while maintaining a tidy interface. Experiment with different settings and make your textareas shine!

Related posts:

×