Simple jQuery Input Mask Plugin with Auto Tab Support - Tabinput

Tabinput is a jQuery plugin used to mask your input field with custom format & pattern that supports for auto tab functionality between separated sections.

How to use it:

1. Include jQuery library and the jQuery tabinput plugin on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/tabinput.js"></script>

2. Call the function on the desired input field.

$('#dateinput').tabinput({
  // options here
});

3. The required CSS styles.

.tabinput {
  margin: 0;
  display: inline-block;
  background-color: white;
  border: 1px inset;
  -webkit-appearance: textfield;
  white-space: nowrap;
  max-width: 100%;
}

.tabinput [contenteditable] {
  display: inline-block;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  margin: 0;
  max-width: inherit;
  white-space: nowrap;
}

4. Config the plugin by passing an object with the following options.

$('#dateinput').tabinput({
  format: 'MM/DD/YYYY',
  seperator: '/',
  filter: false,
  textAlign: 'left',
  cursor: 'text',
  placeholder: true,
  charWidth: 0.6,
  widthUnit: 'em',
  arrowKeys: true,
  templates: {
    inputContainer: '<div class="tabinput"></div>',
    inputs: '<div class="tabinput-input" contenteditable="true" />',
    seperator: '<span class="tabinput-seperator"></span>'
  }
});

Change log:

v1.3.1 (2015-09-04)

• update.

---

This awesome jQuery plugin is developed by begizi. For more Advanced Usages, please check the demo page or visit the official website.