maxlength
using both maxlength
and data-maxlength
attributes.
PxCharLimit plugin is initialized on pre-existing markup.
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. |
require(['jquery', 'px/plugins/px-char-limit'], function($) {
...
});
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. |
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.
PxCharLimit's options can be specified as attributes.
<input px-char-limit type="text" class="form-control"
maxlength="20"
counter="#selector">