Char limit

Base

You can set an input's maxlength using both maxlength and data-maxlength attributes.

With counter

Characters left: 0
Characters left: 0

Initializing

PxCharLimit plugin is initialized on pre-existing markup.

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, for example: <input type="text" data-maxlength="20">. 

$('input').pxCharLimit(options);

Option Default Description
maxlength (required) None The input's maximum length.
counter None The counter element, which can be presented like a jQuery object or a selector string.

Usage


require(['jquery', 'px/plugins/px-char-limit'], function($) {
  ...
});

Methods

You can call a public method of PxCharLimit instance using the syntax: 


$('input').pxCharLimit('methodName');

Method name Description
update Update the counter element.
destroy Destroy the PxCharLimit instance.

Usage

To use PxCharLimit plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/plugins/px-char-limit.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-char-limit.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-px-char-limit']);

Alternatively, you can include PxCharLimit plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'angular-px-char-limit',
    files: [
      'path/to/js/pixeladmin/plugins/px-char-limit.js',
      'path/to/js/pixeladmin/directives/angular-px-char-limit.js',
    ],
  },
]);

px-char-limit directive

You can use px-char-limit directive on input and textarea elements. And when the scope is destroyed the directive will be destroyed.


Characters left: 0

Options

PxCharLimit's options can be specified as attributes.

  • counter
  • maxlength

<input px-char-limit type="text" class="form-control"
       maxlength="20"
       counter="#selector">