jQuery Ensure Max Length

A simple, easy to use and customizable jquery plugin to limit characteres inside input or textarea fields. See DEMO in action.

Default options

The default plugin options are:

  <script type="text/javascript">
      (function ( $ ) {
          // this is the same of $( 'table' ).EnsureMaxLength();
          $( '#field-selector' ).EnsureMaxLength(
              { 
                  limit: 100,
                  cssClass: '',
                  separator: '/',
                  placement: null
              }
          );
      } ( jQuery ));
  </script>

Basic usage

• Add jQuery Ensure Max Length file to your page after jquery core:

    <script src="path_to_jquery/jquery.min.js"></script>
    <script src="path_to_plugin/jquery-ensure-max-length.js"></script>

2. After import jQuery Ensure Max Length just call the plugin api:

   <script type="text/javascript">
       (function ( $ ) {
           $( '#field-selector' ).EnsureMaxLength();
       } ( jQuery ));
   </script>

Changing default max chars

This plugin even works with textareas. The folowing sample illustrates how to change the default max chars from 100 to 250

   <script type="text/javascript">
       (function ( $ ) {
           $( '#field-selector' ).EnsureMaxLength({
   	       limit: 250
           });
       } ( jQuery ));
   </script>

Adding css classes

jQuery Ensure Max Length allow you to add css classes to customize counter element. The classes must be inserted as string separate by a space.

   /**
    * Add css classes
    */
   <script type="text/javascript">
       (function ( $ ) {
           $( '#field-selector' ).EnsureMaxLength({
                cssClass: 'class1 class2 class3'
           });
       } ( jQuery ));
   </script>

Changing separator

You can also change the separator / to wherever symbol or word you want. In this sample a are changing the / to of.

   /**
    * Changing separator
    */
   <script type="text/javascript">
       (function ( $ ) {
           $( '#field-selector' ).EnsureMaxLength({
                separator: ' of '
           });
       } ( jQuery ));
   </script>

Specifying where to append the counter element

The use of 'placement' is optional and if you want to use it, you must pass a valid jQuery selector to explicit tell to plugin where to append the counter element. See sample5

   <script type="text/javascript">
       (function ( $ ) {
           $( '#field-selector' ).EnsureMaxLength({
                placement: '#counter-container'
           });
       } ( jQuery ));
   </script>

Changelog

1.0.1 - 2019-04-12

• Fix #4 Maxlength

1.0.0 - 2018-12-02

• Initial Commit

Donation

Help me to improve this project sending me some HTMLCOIN
Wallet: HqgaiK6T1o2JP4p3p34CZp2g3XnSsSdCXp

License

MIT