Input Characters Count

A web component displaying the number of characters used in an HTML input field or textarea. Alternatively, it displays the number of characters left.

Usage

1. Put <script async defer src='https://unpkg.com/[email protected]/dist/inputcharacterscount.js'></script> in the header of your website or app.

2. Use the web component in the content of your website or web app as follows:

<input type="text" id="my-text-input" maxlength="32">
<input-characters-count for="my-text-input"></input-characters-count>

The web component introduces a new HTML element <input-characters-count>, which displays the number of chacters used in the text input field. The element has only one attribute:

• for="<id_of_input_field>", where <id_of_input_field> is the id of the input field.

The output is simply the number of characters in the input field (e.g. 12). If a maxlength attribute if given in the input field, the output is e.g. 12/256.

If a maxlength attribute if given in the input field, also the new HTML element <input-characters-left> can be used, which displays the number of characters left, e.g. 244/256.

The output is just a string, which can be enveloped by any CSS style you need in your website design.