Textarea with Limits on Characters Count

Written by @kerixa 27 February 2021

Sometimes you need to limit the users from inputting large texts in a textarea. In these cases, the whole characters count must be set, and as the visitor types, the remainder available characters must be shown. With the following code example, we have shown how to limit your textarea very simply.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

textarea {
    margin: 50px 50px 0 50px;
    min-width: 300px;
    min-height: 200px;
    padding: 5px;
}

div {
    margin: 5px 50px 50px 50px;
}

    div span {
        background-color: #d62828;
        color: #fff;
        font-weight: bold;
        padding: 5px;
        border-radius: 2px;
    }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
   
<textarea maxlength="100"></textarea>
<div><span></span> Characters Left</div>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
    $("span").text($("textarea").attr("maxlength"));

    $("textarea").on("input", function () {

        var textLength = $(this).val().length,
            maxChars = $(this).attr("maxlength"),
            remChars = maxChars - textLength;

        $("span").text(remChars);

    });

});
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300