Skip to content

Latest commit

 

History

History
84 lines (62 loc) · 3.9 KB

README.md

File metadata and controls

84 lines (62 loc) · 3.9 KB

autoTab Build Status

A plugin that allows the auto tab between inputs and text areas. It is beautiful and lightweight plugin. No jQuery.

Author Homepage: http://djhvscf.github.io/Blog/

Current version

  • v1.0.0 23/Ago/2016

Bugs & Enhancements (next version)

Release history

Version Number Date
v1.0.0 23/Ago/2016

Dependencies

  • In this moment this plugin doesn't have dependencies

How to Use

Define the property data-tab in the input element setting a number between 0 to N like data-tab="0" and declare data-length in the input element setting a number between 1 to N like data-length="1" this property will be the maxlength property in each input element and it helps to plugin knows when change the focus.

Syntax Example

<script src="autoTab.min.js"></script>

<input name="first" id="first" type="text" data-tab="0" data-length="2">
<input name="second" id="second" type="text" data-tab="1" data-length="2">
<input name="third" id="third" type="text" data-tab="3" data-length="2" data-format="number">
(function() {
	
	var options = { recursive: true, autoFocus: true};
	// Calling the plugin with options
	var autoTab = new autoTab(options);
	
	
	// Calling the plugin without options
	var autoTab = new autoTab();
})();

Data tags

Tag Description Required Data type DOM Element
data-tab COnfigures the element to be used in autotab Yes "true" or "false" input, textarea, select, button
data-order Sets the input order Yes "0" to "N" input, textarea, select, button
data-length The length allowed by input element Yes "0" to "N" input, textarea
data-upper Converts the input value to upper case No "true" or "false" input, textarea
data-lower Converts the input value to lower case No "true" or "false" input, textarea
data-nospace Not allowed the white spaces No "true" or "false" input, textarea
data-format The format of the input value allowed in the input element No "text", "alpha", "alphanumeric", "numeric", "hexadecimal", "custom" input, textarea
data-pattern The regular expression to evaluate the input value, if it is set you have to set the data-format with "custom" option No Regular expression input, textarea

Parameters

Parameter Description Default
autoFocus True if you want that the element with data-tab="0" has the focus or you can pass the index number of the respective element, otherwise, false false
onComplete True if you want to call a function when all the inputs are already "tab-ed", you have to pass the callback function in this parameter empty
onChanged Returns a callback with the event, it has the information where you can access to key pressed empty
recursive True if you want that once the inputs are filled, the plugin starts again, otherwise, false false
deleteExceedCharacter True if you want to delete the characters that are exceeding the max lenght set, otherwise, false false
cleanValuesOnRestart True if you want to clean the controls bound, otherwise, false false

Methods

Method Description
destroy If you call this method the plugin will be deleted
restore If you want to enable the plugin again in your page

Demo

http://djhvscf.github.io/autoTab/

Known issues

Reporting issues

Your feedback is very appreciated!
Use this page to report issues (https://github.com/djhvscf/autoTab/issues)