Count Characters
Show count characters in the field.
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>
:
<script>
(function() {
// INITIALIZATION OF COUNT CHARACTERS
// =======================================================
new NueCountCharacters('.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-nue-count-characters-options='{
"output": "#basicCountCharacters"
}'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
<!-- End Form -->
Max length
<!-- 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-nue-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-nue-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 |