Char Counter

• Introduction
• Basic Example
• Real World Example

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

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Char Counter module.

YUI().use(
  'aui-char-counter',
  function(Y) {
    // 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.

YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.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.

YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.CharCounter(
      {
        counter: '#counter',
        input: '#input',
        maxLength: 10,
        on: {
          maxLength: function(event) {
            alert('The max length has been reached');
          }
        }
      }
    );
  }
);