Sneat Dashboard FREE by ThemeSelection

Extras

Extras Page Includes Autosize, Cleave-zen Input Mask, Max Length & Form Repeater.

Read the official Cleave-zen, Form Repeater Documentations for a full list of instructions and other options.

Autosize#

you can use autosize class to create textarea that adjust it's height according to content

Preview
HTML

<textarea class="form-control autosize"></textarea>

Input Mask#

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.

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>

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

Max Length#

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.

Input You typed 0 out of 25 characters.

Textarea You typed 0 out of 255 characters.

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

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.

Username

Password

Gender

Profession

<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">
          <label class="form-label" for="form-repeater-1-1">Username</label>
          <input type="text" id="form-repeater-1-1" class="form-control" placeholder="john.doe" />
        </div>
        <div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
          <label class="form-label" for="form-repeater-1-2">Password</label>
          <input type="password" id="form-repeater-1-2" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
        </div>
        <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
          <label class="form-label" for="form-repeater-1-3">Gender</label>
          <select id="form-repeater-1-3" class="form-select">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </div>
        <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
          <label class="form-label" for="form-repeater-1-4">Profession</label>
          <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>
        </div>
        <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
          <button class="btn btn-label-danger mt-6" data-repeater-delete>
            <i class="icon-base bx bx-x 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 bx bx-plus 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();
        });
      }
    }
  });
}