Extras Page Includes Autosize, CleaveJS Input Mask, Bootstrap Max Length & Form Repeater.
Read the official Autosize, CleaveJS, Form Repeater, Bootstrap Max Length Documentations for a full list of instructions and other options.
AutosizeJS is a small, stand-alone script to automatically adjust textarea height.
Usage
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/autosize/autosize.js"></script>Example
To create a autosize textarea initialize your textarea element like this: autosize(YOUR_ELEMENT);
By using CleaveJS, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.
Usage
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/cleavejs/cleave.js"></script>
<script src="assets/vendor/libs/cleavejs/cleave-phone.js"></script>Credit Card
Use creditCard: true parameter to create a credit card input mask.
<div class="input-group input-group-merge">
<input type="text" id="creditCardMask" name="creditCardMask" class="form-control credit-card-mask" placeholder="1356 3215 6548 7898" aria-describedby="creditCardMask2" />
<span class="input-group-text cursor-pointer p-1" id="creditCardMask2"><span class="card-type"></span></span>
</div>new Cleave(".credit-card-mask", {
creditCard: true
});Phone number
Use phone: true parameter to create a phone number input mask.
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input class="form-control phone-number-mask" type="text" placeholder="Enter Phone Number" />
</div>new Cleave(".phone-number-mask", {
phone: true,
phoneRegionCode: "US"
});Date
Use date: true parameter to create a date input mask.
<input class="form-control date-mask" type="text" placeholder=" YYYY-MM-DD"/>new Cleave(".date-mask", {
date: true,
delimiter: "-",
datePattern: ["Y", "m", "d"]
});Time
Use time: true parameter to create a time input mask.
<input class="form-control time-mask" type="text" placeholder=" hh:mm:ss"/>new Cleave(".time-mask", {
time: true,
timePattern: ["h", "m", "s"]
});Numeral
Use numeral: true parameter to create a numeral mask.
<input class="form-control numeral-mask" type="text" placeholder="Enter Numeral" />new Cleave(".numeral-mask", {
numeral: true,
numeralThousandsGroupStyle: "thousand"
});Blocks
Use blocks: [4, 3, 3] parameter to create a input mask with blocks.
<input class="form-control block-mask" type="text" placeholder="Blocks [4, 3, 3]" />new Cleave(".block-mask", {
blocks: [4, 3, 3],
uppercase: true
});Delimiter
Use delimiter: "·" parameter to create a delimiter between blocks.
<input class="form-control delimiter-mask" type="text" placeholder="Delimiter: '.'"/>new Cleave(".delimiter-mask", {
delimiter: "·",
blocks: [3, 3, 3],
uppercase: true
});Custom Delimiter
Use delimiter: [".", ".", "-"] parameter to customize delimiters between blocks.
<input class="form-control custom-delimiter-mask" type="text" placeholder="Delimiter: ['.', '.', '-']" />new Cleave(".custom-delimiter-mask", {
delimiters: [".", ".", "-"],
blocks: [3, 3, 3, 2],
uppercase: true
});Prefix
Use prefix: "+63" parameter to add a prefix to your input.
This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.
Usage
In order to use bootstrap-maxlength on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.css " />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.js"></script>Example
Refer below mentioned example to create a max-length input.
<div class="row">
<div class="col-12 mb-6">
<div class="form-floating form-floating-outline">
<input type="text" id="bootstrap-maxlength-example1" class="form-control bootstrap-maxlength-example" placeholder="John Doe" maxlength="25" />
<label for="bootstrap-maxlength-example1">Input</label>
</div>
</div>
<div class="col-12">
<div class="form-floating form-floating-outline">
<textarea id="bootstrap-maxlength-example2" class="form-control h-px-100 bootstrap-maxlength-example" placeholder="Lorem ipsum..." rows="3" maxlength="255"></textarea>
<label for="bootstrap-maxlength-example2">Textarea</label>
</div>
</div>
</div>$(".bootstrap-maxlength-example").each(function() {
$(this).maxlength({
warningClass: "label label-success bg-success text-white",
limitReachedClass: "label label-danger",
separator: " out of ",
preText: "You typed ",
postText: " chars available.",
validate: true,
threshold: +this.getAttribute("maxlength")
});
});This plugin creates an interface to add and remove a repeatable group of input elements.
Usage
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/jquery-repeater/jquery-repeater.js"></script>Example
Refer below mentioned example to create a Form Repeater.
<form class="form-repeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
<div class="row">
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<div class="form-floating form-floating-outline">
<input type="text" id="form-repeater-1-1" class="form-control" placeholder="john.doe" />
<label for="form-repeater-1-1">Username</label>
</div>
</div>
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<div class="form-floating form-floating-outline">
<input type="password" id="form-repeater-1-2" class="form-control" placeholder="············" />
<label for="form-repeater-1-2">Password</label>
</div>
</div>
<div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
<div class="form-floating form-floating-outline">
<select id="form-repeater-1-3" class="form-select">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label for="form-repeater-1-3">Gender</label>
</div>
</div>
<div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
<div class="form-floating form-floating-outline">
<select id="form-repeater-1-4" class="form-select">
<option value="Designer">Designer</option>
<option value="Developer">Developer</option>
<option value="Tester">Tester</option>
<option value="Manager">Manager</option>
</select>
<label for="form-repeater-1-4">Profession</label>
</div>
</div>
<div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
<button class="btn btn-outline-danger" data-repeater-delete>
<i class="ri-close-line me-1"></i>
<span class="align-middle">Delete</span>
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="mb-0">
<button class="btn btn-primary" data-repeater-create>
<i class="ri-add-line me-1"></i>
<span class="align-middle">Add</span>
</button>
</div>
</form>// Form Repeater
// ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
// -----------------------------------------------------------------------------------------------------------------
var formRepeater = $(".form-repeater");
var row = 2;
var col = 1;
formRepeater.on('submit', function(e) {
e.preventDefault();
});
formRepeater.repeater({
show: function() {
var fromControl = $(this).find('.form-control, .form-select');
var formLabel = $(this).find('.form-label');
fromControl.each(function(i) {
var id = 'form-repeater-' + row + '-' + col;
$(fromControl[i]).attr('id', id);
$(formLabel[i]).attr('for', id);
col++;
});
row++;
$(this).slideDown();
},
hide: function(e) {
confirm('Are you sure you want to delete this element?') && $(this).slideUp(e);
}
});