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>
(function() {
// INITIALIZATION OF COUNT CHARACTERS
// =======================================================
new HSCountCharacters('.js-count-characters')
});
</script>
Basic example
<!-- Form -->
<div class="d-flex justify-content-between">
<label for="reviewLabel" class="form-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>
<!-- End Form -->
Max length
Use maxlength="*" attribute
<!-- Form -->
<div class="d-flex justify-content-between">
<label for="reviewLabelModalEg" class="form-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>
<!-- End Form -->
Modal example
File attachment
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">File attachment</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Form -->
<div class="d-flex justify-content-between">
<label for="reviewModalEgLabel" class="input-label">Review</label>
<span id="basicCountCharactersModalEg" class="text-muted"></span>
</div>
<textarea class="js-count-characters form-control" id="reviewModalEgLabel" placeholder="Textarea field" rows="4"
data-hs-count-characters-options='{
"output": "#basicCountCharactersModalEg"
}'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
<!-- End Form -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
output
|
Element to display the number of characters. |
null
|