md.shakil hossain
14195
Hello guys in this video am going to show you how to create a nice looking OTP page with autofocus input fields using just html, css and a little bit of javascript, i hope you guys enjoy the video.
Also if you're new to the channel please subscribe for more cool videos about web development,app development and more techy stuff.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autofocus Field</title>
<link rel="stylesheet" type="text/css" href="otp.css">
</head>
<body>
<div class="container">
<h1>ENTER OTP</h1>
<div class="userInput">
<input type="text" id='ist' maxlength="1" onkeyup="clickEvent(this,'sec')">
<input type="text" id="sec" maxlength="1" onkeyup="clickEvent(this,'third')">
<input type="text" id="third" maxlength="1" onkeyup="clickEvent(this,'fourth')">
<input type="text" id="fourth" maxlength="1" onkeyup="clickEvent(this,'fifth')">
<input type="text" id="fifth" maxlength="1">
</div>
<button>CONFIRM</button>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container{
display: flex;
flex-flow: column;
height: 100%;
align-items: space-around;
justify-content: center;
}
.userInput{
display: flex;
justify-content: center;
}
input{
margin: 10px;
height: 35px;
width: 65px;
border: none;
border-radius: 5px;
text-align: center;
font-family: arimo;
font-size: 1.2rem;
background: #eef2f3;
}
h1{
text-align: center;
font-family: arimo;
color: honeydew;
}
button{
width: 150px;
height: 40px;
margin: 25px auto 0px auto;
font-family: arimo;
font-size: 1.1rem;
border: none;
border-radius: 5px;
letter-spacing: 2px;
cursor: pointer;
background: #616161; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9bc5c3, #616161); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #9bc5c3, #616161); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
function clickEvent(first,last){
if(first.value.length){
document.getElementById(last).focus();
}
}
