Simple jQuery Input Mask Plugin with Auto Tab Support - Tabinput
File Size: | 15.3 KB |
---|---|
Views Total: | 2128 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.