Telegram Group Join Now
Otp Input Field Using Html,Css & JavaScript
.png "Otp Input Field Html Css | Otp Input Using Html Css Javascript")
| Code by | Vatsal Dave |
| Project Download | Link available below |
| Language used | HTML.CSS, JavaScript |
| External link / Dependencies | Yes |
| Responsive | YES |
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Video Tutorial Of Otp Input Field Html Css Javascript
ADVERTISEMENT
HTML Code For Otp input field
<!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 Css and javascript for Otp Input Field.
- Our OTP input structure will be supported by a div container that we will first design.
- “Enter OTP” will now be added as our primary heading utilising the using the div tag.
- The OTP input area will now be made for that. For that, we’ll make a div with the class “userInput,” inside of which we’ll place four text-only input fields, and we’ll give each one a onkeyup event.
- Now using the button tag we will add a confirm button .
output
CSS code For Otp input field
@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;
}
There is all the CSS code for the OTP Input Field. Now, you can see an output with CSS Otp Input Field then we write javascript for Otp Input Field functionality.
Step1: We’ll give our body padding and a zero margin by using the body tag. Our body is sized to be that height (100 vh). The colour of the backdrop has been added for various browsers, however they are all the same. We’ve included a background that is a gradation of black and grey.
Step2: Now using the class selector (.digit-group input) we will add a background color of black and the display is set to “flex” and using the align-item property we will align the text to the “center” and the width and height is set as 30px and 50px respectively and the font-family is set to “Raleway”.
Create Stopwatch Using HTML,CSS and JavaScript
Css Updated output For Otp input field
Javascript Code For Otp input field
$('.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();
}
}
}
});
});
The input area for the OTP will be triggered when the user pushes the up key, and we will also include an auto-submission option so that when the OTP is fully filled out and confirmed by the system, it is automatically sent. Both of these features will be included in our javascript.
Final output For Otp input field
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the OTP Input Field with html,css, and javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
10+ HTML CSS project With Source Code
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
Which code editor do you use for this Otp Input Fieldproject coding?
I personally recommend using VS Code Studio, it’s very simple and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
Yes!
