JavaScriptCharacterCount
An amazingly small, dependency-less utility for counting input characters. Less than 1 Kbyte!
Usage
Count Up
<form>
<fieldset>
<label for="count-characters">Enter Text ...</label>
<input id="count-characters">
</fieldset>
<fieldset>
<label for="count-characters-result">Element contains
<input type="text" id="count-characters-result" readonly>
characters.
</fieldset>
</form>
<script>
// Pass input element as first argument.
// with jquery: $('#count-characters');
// Options array as second argument.
characterCount(document.getElementById('count-characters'), {
max: 3, // the maximum input length (use for ux or callback)
// Pass output element to the output key.
output: document.getElementById('count-characters-result')
});
</script>Count Down
<form>
<fieldset>
<label for="count-characters">Enter Text ...</label>
<input id="count-characters">
</fieldset>
<fieldset>
<label for="count-characters-result">Element can contain up to
<input type="text" id="count-characters-result" readonly>
more characters.
</fieldset>
</form>
<script>
// Pass input element as first argument.
// with jquery: $('#count-characters');
// Options array as second argument.
characterCount(document.getElementById('count-characters'), {
max: 3, // the maximum input length (use for ux or callback)
// Pass output element to the output key.
output: document.getElementById('count-characters-result'),
// Invert counting, e.g. counting down
invert: true
},
null // Callback in the third argument - here null
);
</script>See 'examples' for a real life example.
CDN
For Development: https://rawgit.com/PascaleBeier/JavaScriptCharacterCount/2.1.0/dist/javascript-character-count.min.js
For Production: https://cdn.rawgit.com/PascaleBeier/JavaScriptCharacterCount/2.1.0/dist/javascript-character-count.min.js
Download
Downloads can be found at the Releases Page.
npm: npm i javascript-character-count
API
characterCount(element <element>, array <options>, callback <function> = null);Options
The array passed as second argument:
{
max: 255 // int, required. The callback is fired after this number is reached (or subtracted to 0 with invert = true)
output: document.querySelector('div.outputElement'), // element, required
invert: true // invert counting
}Callbacks
Most of the time, you will want something to happen when a user enters a certain number of characters.
You can realize this with callbacks. If you want a simple alert() to popup, you can do:
<form>
<fieldset>
<label for="count-characters">Enter Text ...</label>
<input id="count-characters">
</fieldset>
<fieldset>
<label for="count-characters-result">Element contains
<input type="text" id="count-characters-result" readonly>
characters.
</fieldset>
</form>
<script>
// Pass input element as first argument.
// with jquery: $('#count-characters');
// Options array as second argument.
characterCount(document.getElementById('count-characters'), {
max: 3, // the maximum input length (use for ux or callback)
// Pass output element to the output key.
output: document.getElementById('count-characters-result')
},
// Passing the callback function as third parameter.
function () {
alert('You entered the maximum number of characters');
});
</script>Changelog
See CHANGELOG
Contributing - Development Setup
# Get the source
$ git clone https://github.com/PascaleBeier/JavaScriptCharacterCount
$ cd JavaScriptCharacterCount
# Install devDependencies
$ npm i
# Compile src/ to dist/
$ npm run dev
# Build for publishing
$ npm run buildstart editing src/javascript-character-count.js and open up examples/index.html in your browser.
License
The MIT License.
