Move focus on next field when enter is the press.

otp-generate

In this small but interesting tutorial, I will teach you how to move focus on next field when enter is the press.

When we using OTP system in sites, then when entering a four-digit number. you are entering the first number then they will automatically move on next field.

So let’s start our tutorial, You have to create otp.html and put the below HTML code.


Output:


otp

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div class="container">
         <div class="text-center">
            <div id="wrapper">
               <div id="dialog">
                  <h3>Please enter the 4-digit verification code we sent via SMS:</h3>
                  <div class="phone-field"> 
                     <input class="phone-input" name="phone-input1" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input2" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input3" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input4" type="tel" size="1" maxlength="1">
                  </div>
                  <button class="btn btn-primary btn-embossed">Verify</button>
                  <div>
                    Didn't receive the code?<br />
                    <a href="#">Send code again</a><br />
                    <a href="#">Change phone number</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

<style type="text/css">
	#wrapper {
	font-family: Lato;
	font-size: 1.5rem;
	text-align: center;
	box-sizing: border-box;
	color: #333;
	#dialog {
		border: solid 1px #ccc;
		margin: 10px auto;
		padding: 20px 30px;
		display: inline-block;
		box-shadow: 0 0 4px #ccc;
		background-color: #FAF8F8;
		overflow: hidden;
		position: relative;
		max-width: 450px;
		h3 {
			margin: 0 0 10px;
			padding: 0;
			line-height: 1.25;
		}
		span {
			font-size: 90%;
		}
		#form {
			max-width: 240px;
			margin: 25px auto 0;
			input {
				margin: 0 5px;
				text-align: center;
				line-height: 80px;
				font-size: 50px;
				border: solid 1px #ccc;
				box-shadow: 0 0 5px #ccc inset;
				outline: none;
				width: 20%;
				transition: all .2s ease-in-out;
				border-radius: 3px;
				&:focus {
					border-color: purple;
					box-shadow: 0 0 5px purple inset;
				}
				&::selection {
					background: transparent;
				}
			}
			button {
				margin: 30px 0 50px;
				width: 100%;
				padding: 6px;
				background-color: #B85FC6;
				border: none;
				text-transform: uppercase;
			}
		}
		button {
			&.close {
				border: solid 2px;
				border-radius: 30px;
				line-height: 19px;
				font-size: 120%;
				width: 22px;
				position: absolute;
				right: 5px;
				top: 5px;
			}
		}
		div {
			position: relative;
			z-index: 1;
		}
		img {
			position: absolute;
			bottom: -70px;
			right: -63px;
		}
	}
	}
</style>

Now you have to add jQuery in your HTML file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" >
	$(document).ready(function (){
		$('body').on('keyup', 'input.phone-input', function (){
			var key = event.keyCode || event.charCode;
			var inputs = $('input.phone-input');
			if (($(this).val().length === this.size) && key != 32){
				inputs.eq(inputs.index(this) + 1).focus();
			}
			if (this.value.length == 0) {
				$(this).prev().focus();
			}
		});
	}); 
</script>

Here the final code of tutorial.


<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div class="container">
         <div class="text-center">
            <div id="wrapper">
               <div id="dialog">
                  <h3>Please enter the 4-digit verification code we sent via SMS:</h3>
                  <div class="phone-field"> 
                     <input class="phone-input" name="phone-input1" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input2" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input3" type="tel" size="1" maxlength="1">
                     <input class="phone-input" name="phone-input4" type="tel" size="1" maxlength="1">
                  </div>
                  <button class="btn btn-primary btn-embossed">Verify</button>
                  <div>
                    Didn't receive the code?<br />
                    <a href="#">Send code again</a><br />
                    <a href="#">Change phone number</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

<style type="text/css">
	#wrapper {
	font-family: Lato;
	font-size: 1.5rem;
	text-align: center;
	box-sizing: border-box;
	color: #333;
	#dialog {
		border: solid 1px #ccc;
		margin: 10px auto;
		padding: 20px 30px;
		display: inline-block;
		box-shadow: 0 0 4px #ccc;
		background-color: #FAF8F8;
		overflow: hidden;
		position: relative;
		max-width: 450px;
		h3 {
			margin: 0 0 10px;
			padding: 0;
			line-height: 1.25;
		}
		span {
			font-size: 90%;
		}
		#form {
			max-width: 240px;
			margin: 25px auto 0;
			input {
				margin: 0 5px;
				text-align: center;
				line-height: 80px;
				font-size: 50px;
				border: solid 1px #ccc;
				box-shadow: 0 0 5px #ccc inset;
				outline: none;
				width: 20%;
				transition: all .2s ease-in-out;
				border-radius: 3px;
				&:focus {
					border-color: purple;
					box-shadow: 0 0 5px purple inset;
				}
				&::selection {
					background: transparent;
				}
			}
			button {
				margin: 30px 0 50px;
				width: 100%;
				padding: 6px;
				background-color: #B85FC6;
				border: none;
				text-transform: uppercase;
			}
		}
		button {
			&.close {
				border: solid 2px;
				border-radius: 30px;
				line-height: 19px;
				font-size: 120%;
				width: 22px;
				position: absolute;
				right: 5px;
				top: 5px;
			}
		}
		div {
			position: relative;
			z-index: 1;
		}
		img {
			position: absolute;
			bottom: -70px;
			right: -63px;
		}
	}
	}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" >
	$(document).ready(function (){
		$('body').on('keyup', 'input.phone-input', function (){
			var key = event.keyCode || event.charCode;
			var inputs = $('input.phone-input');
			if (($(this).val().length === this.size) && key != 32){
				inputs.eq(inputs.index(this) + 1).focus();
			}
			if (this.value.length == 0) {
				$(this).prev().focus();
			}
		});
	}); 
</script>

Now open your browser and paste the URL:

http://localhost/otp.html

About Dhaval Shah

My name is Dhaval Shah. I'm a PHP developer, entrepreneur and CEO of DAG inventions PVT ltd. I live in India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Java-script, JQuery, Laravel, WordPress and Bootstrap.
Follow me on Github / Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!