Extras

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.


Autosize

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);

<textarea id="autosize-demo" rows="3" class="form-control"></textarea>
const textarea = document.querySelector("#autosize-demo");
autosize(textarea);

Input Mask

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.

US (+1)
<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.

<input class="form-control prefix-mask" type="text" />
new Cleave(".prefix-mask", {
  prefix: "+63",
  blocks: [3, 3, 3, 4],
  uppercase: true
});

Bootstrap Max Length

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")
  });
});

Form Repeater

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-6 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-6 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="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
            <label for="form-repeater-1-2">Password</label>
          </div>
        </div>
        <div class="mb-6 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-6 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-6 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
          <button class="btn btn-outline-danger btn-xl" data-repeater-delete>
            <i class="ri-close-line ri-24px me-1"></i>
            <span class="align-middle">Delete</span>
          </button>
        </div>
      </div>
      <hr class="mt-0">
    </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);
  }
});
© 2017- Pixinvent, Hand-crafted & Made with ❤️