Maximum Length v1.0.0
Description: Display length of form controls with specified maxlength attribute by simply adding $('[maxlength]').maxlength(); to your javascript
Works with the following dependencies:
- Bootstrap v5.3 (https://getbootstrap.com/docs/5.3/)
- Bootstrap Icons v1.11.1 (https://icons.getbootstrap.com/)
- jQuery v3.7.1 (https://jquery.com/)
How to use:
- Add Bootstrap CSS and Bootstrap Icons CSS files to your tag
- Add jQuery JS file to your tag, preferable at the end of the body
- Add the bootstrap5-maxlength JS file after the jQuery script
- Include the line on your Document Load event: $('[maxlength]').maxlength();
Sample code:
<!doctype html>
<title>Sample</title><main>
<div class="bg-body-secondary d-flex align-items-center justify-content-center vh-100 p-3">
<div class="card w-100" style="max-width: 20rem;">
<div class="card-body">
<form data-role="form" data-action="action/submit" autocomplete="off">
<fieldset>
<div class="mb-3">
<label class="form-label" for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" maxlength="16" value="Test" required autofocus>
</div>
<div>
<label class="form-label" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" maxlength="64" required autofocus>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</main>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/maxlength.js"></script>
<script>
$(() => {
$('[maxlength]').maxlength();
});
</script>