Set Input max length with display character count jQuery Plugin – jQuery.maxlength.js

In this Post I am going to share small jQuery Plugin to set max length with display character count , default HTML input max length doesn’t display how many character are remaining and what is the maximum limit for any input box. This small plugin makes your input box more informative which display of maxlength and realtime character count.




Integrate jQuery.maxlength.js in Your HTML Input box

Libraries

Include latest jQuery library with jQuery.maxlength.js

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jQuery.maxlength.js"></script>

HTML

Put your input text fields inside DIV containers and specify the maximum number of characters using the native maxlength attribute or data-val-length attribute.

    <div>
        <input
            type="number"
            maxlength="10"
        >
    </div>
 
    <div>
        <span
            data-val-length="parent"
        >
        </span>
        <input
            type="text"
            maxlength="20"
        >
    </div>
 
    <div>
        <textarea maxlength="50" name="" id="" cols="30" rows="10"></textarea>
    </div>



JS

Finally call the plugin and it’ll make your text box informative as soon as user input character it’ll display realtime character count with max character allowed.

$(function() {   
 $('div').maxlength();
});

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.