Limit The Number Of Characters Within Input/Textarea | jQuery-maxlength

Number-Of-Characters-Within-Input-Textarea

Input Textarea Maxlength – Jquery plugin that uses the max length attribute to restrict the maximum number of characters allowed in the input, textarea element. This plugin also provides a template for displaying the number of characters entered in the input, textarea element.

More Features:

  • The character counter is displayed only if you end up typing.
  • Automatically prevents typing while you reach the max limit.
  • Supports paste event.

Configurable options

  • Text: The text to display on the form.
  • Position: The position of text on the form.
  • Color: The color of the text displayed on the form.
  • Font size: The size of the text displayed on the form.
  • Form: a container for text displayed on the form.
  • Show Form: Hide / Show form.

How to make use of it:

1. Determine the maximum character limit to your enter or Textarea component utilizing the maxlength attribute:

<h2>Input</h2>
<input maxlength="66">
<h2>Textarea</h2>
<textarea maxlength="150"></textarea>

2. Download the plugin and insert the JavaScript jquery-maxlength.min.js after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery-maxlength.min.js"></script>

3. Attach the plugin to the enter and/or textarea component and accomplished it.

$(function(){
  $("input,textarea").maxlength({
    // options here
  });
});

4. Customize the looks of the character counter.

$("input,textarea").maxlength({
  text: "{total}/{maxLength}",
  position: "left",
  color: "grey",
  fontSize: "12px",
  template: "<div>",
  showTemplate: true
});</div>

Javascript Limit Input Length, Input Type Number Maxlength, jQuery Textarea Maxlength Character Count


See Demo And Download

Official Website(GururajNadager): Click Here

This superior jQuery/javascript plugin is developed by GururajNadager. For extra Advanced Usages, please go to the official website.