Extras Page Includes Autosize, Cleave-zen Input Mask, 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 Cleave-zen, 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/cleave-zen/cleave-zen.js"></script>Credit Card
Use formatCreditCard function 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>const creditCard = document.querySelector('.credit-card-mask');
creditCard.addEventListener('input', event => {
creditCard.value = formatCreditCard(event.target.value);
});
registerCursorTracker({
input: creditCard,
delimiter: ' '
});Phone number
Use blocks: [3, 3, 4] with formatGeneral function 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>const phoneMask = document.querySelector('.phone-number-mask');
phoneMask.addEventListener('input', event => {
phoneMask.value = formatGeneral(event.target.value, {
blocks: [3, 3, 4],
delimiters: [' ', ' ']
});
});
registerCursorTracker({
input: phoneMask,
delimiter: ' '
});Date
Use formatDate function to create a date input mask.
<input class="form-control date-mask" type="text" placeholder=" YYYY-MM-DD"/>const dateMask = document.querySelector('.date-mask');
dateMask.addEventListener('input', event => {
dateMask.value = formatDate(event.target.value, {
delimiter: '-',
datePattern: ['Y', 'm', 'd']
});
registerCursorTracker({
input: dateMask,
delimiter: '-'
});
});Time
Use formatTime function to create a time input mask.
<input class="form-control time-mask" type="text" placeholder=" hh:mm:ss"/>const timeMask = document.querySelector('.time-mask');
timeMask.addEventListener('input', event => {
timeMask.value = formatTime(event.target.value, {
timePattern: ['h', 'm', 's']
});
});
registerCursorTracker({
input: timeMask,
delimiter: ':'
});Numeral
Use formatNumeral function to create a numeral mask.
<input class="form-control numeral-mask" type="text" placeholder="Enter Numeral" />const numeralMask = document.querySelector('.numeral-mask');
numeralMask.addEventListener('input', event => {
numeralMask.value = formatNumeral(event.target.value, {
numeralThousandsGroupStyle: 'thousand'
});
});Blocks
Use blocks: [4, 3, 3] parameter with formatGeneral function to create a input mask with blocks.
<input class="form-control block-mask" type="text" placeholder="Blocks [4, 3, 3]" />const blockMask = document.querySelector('.block-mask');
blockMask.addEventListener('input', event => {
blockMask.value = formatGeneral(event.target.value, {
blocks: [4, 3, 3],
delimiters: [' ', ' ']
});
});
registerCursorTracker({
input: blockMask,
delimiter: ' '
});
Delimiter
Use delimiter: "·" parameter to create a delimiter between blocks.
<input class="form-control delimiter-mask" type="text" placeholder="Delimiter: '.'"/>const delimiterMask = document.querySelector('.delimiter-mask');
delimiterMask.addEventListener('input', event => {
delimiterMask.value = formatGeneral(event.target.value, {
blocks: [3, 3, 3],
delimiter: '·'
});
});
registerCursorTracker({
input: delimiterMask,
delimiter: '.'
});Custom Delimiter
Use delimiter: [".", ".", "-"] parameter to customize delimiters between blocks.
<input class="form-control custom-delimiter-mask" type="text" placeholder="Delimiter: ['.', '.', '-']" />const customDelimiter = document.querySelector('.custom-delimiter-mask');
customDelimiter.addEventListener('input', event => {
customDelimiter.value = formatGeneral(event.target.value, {
delimiters: ['.', '.', '-'],
blocks: [3, 3, 3, 2],
uppercase: true
});
});
registerCursorTracker({
input: customDelimiter,
delimiters: ['.', '-']
});Prefix
Use prefix: "+63" parameter with formatGeneral function to add a prefix to your input.
<input class="form-control prefix-mask" type="text" />const prefixMask = document.querySelector('.prefix-mask');
const prefixOption = {
prefix: '+63',
blocks: [3, 3, 3, 4],
delimiter: ' '
};
registerCursorTracker({
input: prefixMask,
delimiter: ' '
});
prefixMask.value = formatGeneral('', prefixOption);
prefixMask.addEventListener('input', event => {
prefixMask.value = formatGeneral(event.target.value, prefixOption);
});You can use maxLengthCount function to display the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.
Example
Refer below mentioned example to create a max-length input.
<div class="row">
<div class="col-12 mb-8">
<div class="maxLength-wrapper">
<label class="form-label" for="maxLength-example1">Input</label>
<input
type="text"
id="maxLength-example1"
class="form-control maxLength-example"
maxlength="25" />
<small id="input-maxlength-info"></small>
</div>
</div>
<div class="col-12 mb-2">
<div class="maxLength-wrapper">
<label class="form-label" for="maxLength-example2">Textarea</label>
<textarea
id="maxLength-example2"
class="form-control maxLength-example"
rows="3"
maxlength="255"></textarea>
<small id="textarea-maxlength-info"></small>
</div>
</div>
</div>const inputMaxLength = document.getElementById('maxLength-example1').getAttribute('maxlength');
const inputInfo = document.getElementById('input-maxlength-info');
const inputElement = document.getElementById('maxLength-example1');
window.Helpers.maxLengthCount(inputElement, inputInfo, inputMaxLength);
inputElement.addEventListener('input', function () {
window.Helpers.maxLengthCount(inputElement, inputInfo, inputMaxLength);
});
const textareaMaxLength = document.getElementById('maxLength-example2').getAttribute('maxlength');
const textareaInfo = document.getElementById('textarea-maxlength-info');
const textareaElement = document.getElementById('maxLength-example2');
window.Helpers.maxLengthCount(textareaElement, textareaInfo, textareaMaxLength);
textareaElement.addEventListener('input', function () {
window.Helpers.maxLengthCount(textareaElement, textareaInfo, textareaMaxLength);
});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="icon-base ri 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="icon-base ri 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.
// -----------------------------------------------------------------------------------------------------------------
const formRepeater = document.querySelector('.form-repeater');
if (formRepeater) {
var row = 2;
var col = 1;
formRepeater.addEventListener('submit', function (e) {
e.preventDefault();
});
$(formRepeater).repeater({
show: function () {
var formControlElements = this.querySelectorAll('.form-control, .form-select');
var formLabelElements = this.querySelectorAll('.form-label');
formControlElements.forEach(function (control, i) {
var id = 'form-repeater-' + row + '-' + col;
control.id = id;
formLabelElements[i].setAttribute('for', id);
col++;
});
row++;
$(this).hide().slideDown(300);
},
hide: function (deleteElement) {
if ( confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(300, function () {
deleteElement();
});
}
}
});