Reading Time: 4 minutes

618 Views

Inside this article we will see the concept i.e JQuery Limit the Number of Characters Per Line in Textarea Example Tutorial. Article contains the classified information about How to limit character input in textarea Using jQuery.

If you are looking to create a textarea which will limit the number of characters entered into it along with number of lines into it. So you are at the right place to learn. Using jQuery very basic concept you can do.

Let’s get started.

Application Programming

Let’s create a folder with name limit-area in your localhost directory. In this project folder, create a file: index.html

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <title>JQuery Limit the Number of Characters Per Line in Textarea</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h3>JQuery Limit the Number of Characters Per Line in Textarea</h3>
        <div class="panel panel-primary">
            <div class="panel-heading">How To Limit Number of Lines and Characters</div>
            <div class="panel-body">
                <form class="form-horizontal" action="javascript:void(0)">

                    <div class="form-group">
                        <label class="control-label col-sm-2" for="current">Description</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="txtDes" name="txtDes"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            var maxLength = 30;
            var mawRow = 4;
            $('#txtDes').on('input focus keydown keyup', function() {
                var text = $(this).val();
                var lines = text.split("\n");

                for (var i = 0; i < lines.length; i++) {
                    if (lines[i].length > maxLength) {
                        lines[i] = lines[i].substring(0, maxLength);
                    }
                }
                while (lines.length > mawRow) {
                    lines.pop();
                }
                $(this).val(lines.join("\n"));
            });
        });
    </script>
</body>

</html>

Concept

Here, this is the concept by which you can limit number of characters users can enter into textarea as well as for limited number of lines.

$(function() {
    var maxLength = 30;
    var mawRow = 4;
    $('#txtDes').on('input focus keydown keyup', function() {
        var text = $(this).val();
        var lines = text.split("\n");

        for (var i = 0; i < lines.length; i++) {
            if (lines[i].length > maxLength) {
                lines[i] = lines[i].substring(0, maxLength);
            }
        }
        while (lines.length > mawRow) {
            lines.pop();
        }
        $(this).val(lines.join("\n"));
    });
});

Application Testing

Open your browser.

Next,

Your project URL will be like this.

URL: http://localhost/limit-area/index.html

You will see you can’t enter more than 30 characters in a single row and also not more than 4 rows in this textarea.

We hope this article helped you to learn JQuery Limit the Number of Characters Per Line in Textarea Example Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.