Fork me on GitHub

Char Counter

Provides a character counter that limits the amount of text in a field.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Char Counter module.

AUI().use(
  'char-counter',
  function(A) {
    // code goes here
  }
);

Using Char Counter

Create an input and an element to be used as the counter.

<input type="text" id="input"/>
<span id="counter"></span> character(s) remaining

Now let's create a new instance of Char Counter using these two elements and setting the maximum length to 10.

AUI().use(
  'aui-char-counter',
  function(A) {
    new A.CharCounter(
      {
        counter: '#counter',
        input: '#input',
        maxLength: 10
      }
    );
  }
);

Configuring Char Counter

When the maximum length is reached, we can create a function, such as an alert informing the user that the maximum length was reached.

AUI().use(
  'aui-char-counter',
  function(A) {
    new A.CharCounter(
      {
        counter: '#counter',
        input: '#input',
        maxLength: 10,
        on: {
          maxLength: function(event) {
            alert('The max length has been reached');
          }
        }
      }
    );
  }
);
For more information about configuration, check out our API Docs.