Auto Tab Using jQuery

Posted by & filed under JAVASCRIPT, 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

Auto Tab Using jQuery

Here is the autotab jquery script.

function autoTab(current,next){
      if (current.getAttribute&&current.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&&current.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

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!