Auto Tab Using jQuery

muni

9 years ago

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.

Demo 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();
}

Download Auto Tab jQuery Script

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>

Share this: