Otp Input Field Html Css | Otp Input Using Html Css Javascript







Otp Input Field Html Css | Otp Input Using Html Css Javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create an Otp Input Field. We use HTML, Css, and javascript for Otp Input Field. I hope you enjoy our blog so let’s start with a basic HTML structure for the OTP Input Field. 

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP Input</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="prompt">
Enter the code generated on your mobile device below to log in!
</div>
<form method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
<input type="text" id="digit-1" name="digit-1" data-next="digit-2" />
<input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" />
<input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" />
<input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

There is all the HTML code for the OTP Input Field. Now, you can see an output with Otp Input Field then we write javascript for Otp Input Field.

output

Otp Input Field Html Css | Otp Input Using Html Css Javascript

CSS code

 @import url('https://fonts.googleapis.com/css?family=Raleway:200');  
body, html {
height: 100%;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {
background-color: #0f0f1a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.digit-group input {
width: 30px;
height: 50px;
background-color: #18182a;
border: none;
line-height: 50px;
text-align: center;
font-size: 24px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
color: white;
margin: 0 2px;
}
.digit-group .splitter {
padding: 0 5px;
color: white;
font-size: 24px;
}
.prompt {
margin-bottom: 20px;
font-size: 20px;
color: white;
}

Css Updated output


Otp Input Field Html Css | Otp Input Using Html Css Javascript

Javascript Code

 $('.digit-group').find('input').each(function() {  
$(this).attr('maxlength', 1);
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if(e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if(prev.length) {
$(prev).select();
}
} else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if(next.length) {
$(next).select();
} else {
if(parent.data('autosubmit')) {
parent.submit();
}
}
}
});
});

Final output

Otp Input Field Html Css | Otp Input Using Html Css Javascript Otp Input Field Html Css | Otp Input Using Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the OTP Input Field. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create an OTP Input Field using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code By – Vatsal Dave
Check out more…..

Share on:

Leave a Comment