Hi Coders! Welcome to the Codewithrandom blog. In this article, you learn how to create an OTP input using HTML and CSS. We use a little bit of jQuery code to insert 1 by 1 OTP in the input field. Users can paste their OTPS for any online transaction and other services in the OTP Input Field that will be created.
A one-time password is a password that is only valid for one login session or transaction on a computer system or other digital device. It is sometimes referred to as a one-time PIN, one-time authorization code, or dynamic password. It is an authentication process that allows users to visit any website by entering a one-time password. The OTP method can be used by users to log in securely with the help of this authentication mechanism.
Otp Input Field Html Css:-
We learn how we create an Otp input field. We use Html, Css, and JavaScript (jQuery)for the Otp input field.
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 utilizing 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.
Hamburger Menu Using HTML,CSS and JavaScript
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 color 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" 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".
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 filled out and confirmed by the system, it is automatically sent. Both of these features will be included in our javascript.
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!
Written by - Code With Random/Anki
Code By - Vatsal Dave
Top comments (0)