Count characters
Show count characters in the field.
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF COUNTER CHARACTERS
// =======================================================
$('.js-count-characters').each(function () {
new HSCountCharacters($(this)).init()
});
});
</script>
Basic example
<!-- Form Group -->
<div class="form-group">
<div class="d-flex justify-content-between">
<label for="reviewLabel" class="input-label">Review</label>
<span id="basicCountCharacters" class="text-muted"></span>
</div>
<textarea class="js-count-characters form-control" id="reviewLabel" placeholder="Textarea field" rows="4"
data-hs-count-characters-options='{
"output": "#basicCountCharacters"
}'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
</div>
<!-- End Form Group -->
Max length
Use maxlength="*" attribute
<!-- Form Group -->
<div class="form-group">
<div class="d-flex justify-content-between">
<label for="reviewLabelModalEg" class="input-label">Review</label>
<span id="maxLengthCountCharacters" class="text-muted"></span>
</div>
<textarea class="js-count-characters form-control" id="reviewLabelModalEg" placeholder="Textarea field" rows="4" maxlength="100"
data-hs-count-characters-options='{
"output": "#maxLengthCountCharacters"
}'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
</div>
<!-- End Form Group -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF COUNTER CHARACTERS
// =======================================================
$('.js-count-characters').each(function () {
new HSCountCharacters($(this)).init()
});
});
</script>