Auto Tab Using jQuery
Mostly we all seen this auto tab switch while entering our credit/debit card numbers while proceesing online payment for online purchase. we are going to see how to implement this auto change tab using jQuery.
Based on maxlength property of the textfields, we auto switch the tabto next textfields. We constantly check the length of the textfields, once it reaches maxlength we automatically switch the tab to next textfields.
Auto Tab Using jQuery
Here is the autotab jquery script.
function autoTab(current,next){
if (current.getAttribute&¤t.value.length==current.getAttribute("maxlength"))next.focus();
}
Here is full html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto Tab Using jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.autotab{text-align: center;border:1px solid #7ad03a;}
.title{margin-top: 5%;margin-bottom:4%;}
h1{font-family: Pacifico;}
.num-div{margin-bottom: 50px;}
</style>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center title">Auto Tab Using jQuery</h1>
<div class="row">
<div class="col-md-offset-3 col-md-9">
<form class="form-inline" role="form">
<div class="num-div">
<p >Debit/Credit Card Number: </p>
<div class="form-group">
<input type="text" class="form-control autotab numeric" id="num1" maxlength="4" onkeyup="autoTab(this, num2)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab numeric" id="num2" maxlength="4" onkeyup="autoTab(this, num3)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab numeric" id="num3" maxlength="4" onkeyup="autoTab(this, num4)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab numeric" id="num4" maxlength="4">
</div>
</div>
<p>Text Characters: </p>
<div class="form-group">
<input type="text" class="form-control autotab" id="char1" maxlength="4" onkeyup="autoTab(this, char2)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab" id="char2" maxlength="4" onkeyup="autoTab(this, char3)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab" id="char3" maxlength="4" onkeyup="autoTab(this, char4)">
</div>
<div class="form-group">
<input type="text" class="form-control autotab" id="char4" maxlength="4">
</div>
</form>
</div>
</div>
</div>
<!-- /container -->
<script>
function autoTab(current,next){
if (current.getAttribute&¤t.value.length==current.getAttribute("maxlength"))
next.focus();
}
$(".numeric").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
</script>
</body>
</html>
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
