Skip to content

Instantly share code, notes, and snippets.

@tinshade

tinshade/OTP_Input.html

Created March 6, 2021 07:53
Show Gist options
  • Save tinshade/dd8ab4a5dd187089c67d36b4e1181009 to your computer and use it in GitHub Desktop.
Save tinshade/dd8ab4a5dd187089c67d36b4e1181009 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Bootstrap, JS code for OTP styled inputs. Feel free to make this mobile responsive.
Raw
OTP_Input.html
<!DOCTYPE html>
<html>
<head>
<title>OTP Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
*{
margin:0px;
padding:0px;
}
html{
scroll-behavior: smooth;
background-color: rgba(122, 240, 255,0.8);
}
section{
background-color: rgba(122, 240, 255,0.8);
}
.otp-input{
border:none;
border-bottom:2px solid transparent;
border-radius: 0px;
font-size: 1.1rem;
padding: 5px;
outline:none!important;
font-weight: 600;
text-align: center;
}
input:active,
input:focus
{
outline:0px !important;
box-shadow: none !important;
border-bottom:2px solid red !important;
outline:none!important;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
#OTP_Div{
display: grid;
grid-template-columns: repeat(5, 20%);
grid-gap: 10px;
padding: 5%;
}
</style>
</head>
<body>
<section id="OTP_Section" class="container-fluid text-center" style="margin-top: 10%">
<div class="container text-center col-lg-3 col-sm-12 col-md-3 bg-white rounded-lg shadow-lg p-3">
<div class="alert alert-danger" role="alert" style="display: none" id='alert_box'>
All fields are required!
</div>
<div id="OTP_Div" class="col-lg-10 col-sm-12 col-md-10" >
<input style="background-color: rgba(122, 240, 255,0.1);" autofocus class="form-control otp-input" onkeyup="alter_box(this.id)" maxlength="1" required type="number" id="o1" />
<input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o2" onkeyup="alter_box(this.id)" />
<input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o3" onkeyup="alter_box(this.id)" />
<input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o4" onkeyup="alter_box(this.id)" />
<input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o5" onkeyup="alter_box(this.id)" />
</div>
<div class="container text-center">
<button class="btn border-info text-primary bg-white rounded-lg" onclick="verifyOTP()">Verify</button>
</div>
</div>
</section>
<script type="text/javascript">
function alter_box(id){
var id_num = parseInt(id.split('')[1]);
var key = event.keyCode || event.charCode;
if (key === 8 || key === 46) {
if(id_num != 1){
var prev = 'o'+(id_num-1).toString();
console.log(id_num, prev);
document.getElementById(prev).focus();
}
}else{
var id_num = parseInt(id.split('')[1]);
if(id_num!=5){
var next = 'o'+(id_num+1).toString();
document.getElementById(next).focus();
}
}
}
function verifyOTP(){
var o1=document.getElementById('o1').value;
var o2=document.getElementById('o2').value;
var o3=document.getElementById('o3').value;
var o4=document.getElementById('o4').value;
var o5=document.getElementById('o5').value;
var alert_box = document.getElementById('alert_box');
if(o1!="" && o2!="" && o3!="" && o4!="" && o5!=""){
var otp = parseInt(o1+o2+o3+o4+o5);
alert_box.style.display = 'none';
alert(otp);
}else{
alert_box.style.display = 'block';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment