Demo can be seen here.
npm install js-count --saveJust include required JavaScript:
<script src="js-count.min.js"></script>or
import jCount from 'jCount';Initialize it:
<input class="input" type="text" />
<div class="count"></div>
<script>
const myInputCounter = new jCount({
inputElement: document.querySelector('.input'),
countElement: document.querySelector('.count'),
});
</script>No stylings included, just style it as you wish, see options below.
jCount can take an optional parameter - an [Object] of key/value settings:
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| inputElement | true | [Element] | null | Element of input element |
| countElement | true | [Element] | null | Element of counter element |
| loadOnInit | false | [boolean] | true | Should count characters on load |
| minCount | false | [number] | 0 | Minimum characters allowed in inputElement |
| maxCount | false | [number] | 0 | Maximum characters allowed in inputElement |
| onInput(callback) | false | [function] | undefined | Callback (function) to execute on every input event. It returns object: { count: [number], inputElement: [Element], countElement: [Element] } |
Works in every modern browser.
js-count is licensed under the MIT license.