<div class="row" ng-app="myapp" ng-controller="myctrl">
<div class="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="main-padd">
<div class="otp-text">Please enter the OTP</div>
<form name="otpForm">
<div class="otp-inputs">
<div class="row ">
<div class="col-sm-3 col-xs-3">
<input type="number" name="" class="custom-input-otp text-center" ng-model="val1" maxlength="1" move-next-on-maxlength id="1" />
</div>
<div class="col-sm-3 col-xs-3">
<input type="number" name="" class="custom-input-otp text-center" ng-model="val2" maxlength="1" move-next-on-maxlength id="2" />
</div>
<div class="col-sm-3 col-xs-3">
<input type="number" name="" class="custom-input-otp text-center" ng-model="val3" maxlength="1" move-next-on-maxlength id="3" />
</div>
<div class="col-sm-3 col-xs-3">
<input type="number" name="" class="custom-input-otp text-center" ng-model="val4" maxlength="1" move-next-on-maxlength id="4"/>
</div>
</div><!--row ends-->
</div><!--otp-inputs-->
<div class="btn-center">
<button class="btn btn-custom" type="submit" ng-click="submit()"> SUBMIT </button>
</div>
</form><!--otpForm ends-->
</div><!--main-padd ends-->
</div>
</div><!--row ends-->
.main-padd {
border-radius: 4px;
background: #3a1b49;
margin-top: 20px;
padding: 10px 30px;
}
@media screen and (max-width:1081px){
.otp-inputs {
margin:0 0 30px!important;
}
}
.otp-text {
color: #fff;
font-size: 25px;
margin-bottom: 30px;
text-align: center;
}
.otp-inputs {
margin: 0 100px 30px;
text-align: center;
}
.btn-custom, .btn-custom:hover, .btn-custom:active, , .btn-custom:focus {
background: #e3a700;
color: #fff;
}
.btn-center {
text-align: center;
}
.custom-input-otp {
width: 35px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
View Compiled
'use strict'
var app = angular.module('myapp', [])
app.controller('myctrl', function($scope){
$scope.submit = function() {
if($scope.val1 && $scope.val2 && $scope.val3 && $scope.val4) {
alert('Form submitted');
} else {
alert('Enter all fields')
}
}
})
// move cursor to next input feild
app.directive("moveNextOnMaxlength", function () {
return {
restrict: "A",
link: function link($scope, element) {
element.on("input", function (e) {
if (element.val().length == element.attr("maxlength")) {
var nextElement = element.parent().next().find('input').attr('id');
$('#' + nextElement).focus();
}
});
}
};
});