In this tutorial, we'll walk through the process of creating a simple OTP (One-Time Password) input field using HTML, CSS, and JavaScript. An OTP input field is commonly used for secure verification processes, such as user authentication.
Prerequisites
Basic understanding of HTML, CSS, and JavaScript will be helpful for following along with this tutorial.
The HTML Structure
Let's start by setting up the basic HTML structure for our OTP input field:
<!DOCTYPE html>
<html>
<head>
<title>OTP Input Field</title>
<!-- Include CSS styling here -->
</head>
<body>
<div class="otp-container">
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
</div>
<!-- Include JavaScript logic here -->
</body>
</html>
In this code snippet, we've defined a container for the OTP input fields and created six input elements with the class otp-input. Each input element represents a digit of the OTP.
Styling with CSS
To style our OTP input field, we'll use CSS to control its appearance. Here's a basic CSS snippet for styling the input fields:
/* Set up the container and input styling */
.otp-container {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.otp-input {
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 20px;
outline: none;
transition: border-color 0.3s;
}
.otp-input::placeholder {
color: green;
}
.otp-input:focus {
border-color: blue;
}
In this CSS code, we've defined the styles for the OTP container and each individual input field. We've added basic border styling, alignment, and transitions for visual feedback.
JavaScript for Navigation
Now, let's add JavaScript logic to navigate between input fields as the user enters digits. This will create a seamless experience for entering the OTP:
<script>
const otpInputs = document.querySelectorAll('.otp-input');
otpInputs.forEach((input, index) => {
input.addEventListener('input', (event) => {
const value = event.target.value;
if (value.length === 1) {
if (index < otpInputs.length - 1) {
otpInputs[index + 1].focus();
} else {
input.blur(); // Blur the input when the last digit is entered
}
} else if (value.length === 0) {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
});
input.addEventListener('keydown', (event) => {
if (event.key === 'Backspace') {
if (input.value === '') {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
}
});
});
</script>
This JavaScript code sets up event listeners for the input fields. It listens for the input event to handle navigation and focuses on the next input when a digit is entered. It also listens for the keydown event to handle navigation when the "Backspace" key is pressed.
Putting It All Together
Now that we've covered the HTML structure, CSS styling, and JavaScript logic, you can combine these components to create a functional OTP input field. Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<title>OTP Input Field</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.otp-container {
display: flex;
gap: 10px;
}
.otp-input {
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 20px;
outline: none;
transition: border-color 0.3s;
}
.otp-input::placeholder {
color: green;
}
.otp-input:focus {
border-color: blue;
}
</style>
</head>
<body>
<div class="otp-container">
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
<input type="text" placeholder="-" class="otp-input" maxlength="1" />
</div>
<script>
const otpInputs = document.querySelectorAll('.otp-input');
otpInputs.forEach((input, index) => {
input.addEventListener('input', (event) => {
const value = event.target.value;
if (value.length === 1) {
if (index < otpInputs.length - 1) {
otpInputs[index + 1].focus();
} else {
input.blur();
}
} else if (value.length === 0) {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
});
input.addEventListener('keydown', (event) => {
if (event.key === 'Backspace') {
if (input.value === '') {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
}
});
});
</script>
</body>
</html>
By following this tutorial, you've created a basic OTP input field that's both functional and visually appealing. This can be integrated into various web applications where secure verification is required.
Feel free to enhance the styling and add additional features based on your requirements.
Feel free to adapt this blog post to your platform of choice, and add any additional details or explanations as needed.