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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.