Develop a form for generating OTPs with input fields appearing separately on screen

I am looking to create a design similar to the one shown in the Image, where a 6-digit one-time password (OTP) is required to be entered by the user. Currently, I have implemented this using 6 separate input fields and then combining the values in AngularJS:

 <input type="text" min="1" max="1" name="codess1" [(ngModel)]="codess1" id="code1" #codes1="ngModel" (keydown)="setfocus($event)" autocomplete="off">

 <input type="text" name="codess2" [(ngModel)]="codess2" id="code2" #codes2="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess3" id="code3" [(ngModel)]="codess3" #codes3="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess4" id="code4" [(ngModel)]="codess4" #codes4="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess5" id="code5" [(ngModel)]="codess5" #codes5="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess6" id="code6" [(ngModel)]="codess6" #codes6="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">
jqueryangularjshtmlcss

Answer №1

Here is a solution using vanilla JavaScript

 function inputInsideOtpInput(el) {
            if (el.value.length > 1){
                el.value = el.value[el.value.length - 1];
            }
            try {
                if(el.value == null || el.value == ""){
                    this.focusOnInput(el.previousElementSibling);
                }else {
                    this.focusOnInput(el.nextElementSibling);
                }
            }catch (e) {
                console.log(e);
            }
        }

       function focusOnInput(ele){
           ele.focus();
           let val = ele.value;
           ele.value = "";
           // ele.value = val;
           setTimeout(()=>{
               ele.value = val;
           })
       }
input{
  width: 30px;
}
<div style="display: flex;justify-content: center" id="otp-container">
    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">

    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">

    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">

    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">

    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">

    <input oninput="inputInsideOtpInput(this)"
           maxlength="1" type="number">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalized Pinnacles featuring Angular directive elements displayed on a Bing Maps interface

I've implemented the Bing Maps AJAX Control to showcase a map, and I've crafted an Angular directive specifically for the Pushpins intended on the map: app.directive('myPin', function(){ return { restrict: 'E', ...

angularjsangularjs-directivebing-mapsangularjs-compile

Statically positioned column in PrimeReact's datatable achieved without utilizing jQuery

I have been looking into ways to make one of the columns in my datatable fixed. While I came across a solution using jQuery, I am interested in achieving this without relying on jQuery. Are there any tips you could offer on how to achieve this using HTML, ...

cssreactjsdatatableprimereact

AngularJS is experiencing issues with applying CSS styles within iframes

I'm facing an issue where I've added my CSS to index.html and attempted to utilize the styles within the iframe, but they are not being applied. <iframe name="glcframe" id="glcframe" frameborder="0" width="100%" height="1200" ng-src="home/tes ...

angularjsiframe

Sending Secret Data Securely to the Backend Server

I'm having an issue with my form submission where I need to send a selected dropdown value to the server side using a hidden field, but it's not functioning as expected: @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @id = ...

c#jqueryjsonasp.net-mvc

The styling for the border and background of an HTML tag

html { margin:0; padding:0; background-color:#006600; border-style:solid; } /*Dark Green*/ body { margin:0; padding:0; background-color:#660000; border-style:dotted; } /*Dark Brown*/ <html> <body> test </body> </html&g ...

htmlcss

What steps can be taken to enhance the efficiency of this inverted scrolling script?

I'm working on a webpage that is quite long and loads at the bottom. To make navigation easier for visitors, I want to invert the scrolling direction so they don't have to scroll up to reach the top. However, the script I currently have in place ...

javascriptjqueryscrollvertical-scrollingonscroll

Updating form validation: relocating error messages

When using a jQuery form validation script, an "OK!" message is typically displayed below the input field when the input is correct. However, I would like to customize this behavior and have the "OK!" message appear on the right side of the field instead ( ...

javascriptjqueryhtmlcss

Tips for invoking a function in a Firefox extension using an HTML button

Is there a way to trigger a custom JavaScript function from my browser extension when a button on my web page is clicked? I am looking for a solution where a button click event on my HTML page can invoke a specific function that is defined within my Firef ...

javascripthtmlfirefox-addon

Execute a function once the Ajax request has finished

I am a beginner when it comes to working with Ajax. My current task involves using Ajax within a for loop, where I make an Ajax call and then run a function that utilizes the data retrieved from that call. However, I have noticed that the function only e ...

javascriptjqueryajaxjson

What is the best way to show a list when hovering the mouse over a

<nav> <a href="login.html" class="dropdown-content" style="text-align: center"><span id="login">您好</span><i class="login"></i></a> <a href="9.html"><i class="like"></i></a> <a href="7 ...

jqueryhtmlcss

JavaScript: Determining the presence of a particular value in a JSON object

Solving a Position Validation Issue Working with an array that consists of multiple events, each with names and dates. The task at hand is to create a point in an SVG for each event. For every new Date X = X + 5. For each event on the same date Y = Y + 5 ...

javascriptjqueryarraysjsonvalidation

Personalizing Mat-Select Dimension - Angular 11

As a newcomer to Angular/Angular Material, I'm unsure if I need to write this code myself or if it's already predefined in a certain manner. The issue I'm experiencing is with the dropdown of the mat-select. The panel that appears when you c ...

cssangulardrop-down-menuangular-materialangular11

Having trouble with a deeply nested flex container not scrolling properly despite setting a minimum height?

I'm struggling with achieving overflow in div.stretchy within my flex layout. I want div.stretchy to expand to the edge of the page and then overflow its content. Despite experimenting with various combinations of min-height: 0 and overflow: hidden, I ...

htmlcssflexboxoverflow

Is it possible to set a timeout for Ajax requests using jQuery?

Is there a way in jQuery to set a timeout for post and get methods similar to the global timeouts for ajax start and stop? I am interested in setting up a popup message that appears if an ajax request runs for more than a certain amount of time, indicatin ...

c#.netjqueryasp.net-mvcajax

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

Looking to modify the parsing of JSON data based on a specific string value - is this achievable?

At the moment, I am utilizing jQuery to parse a JSON object and display the values in a table. In this table, I have set the beginning of the URL as static and then concatenated a value to it. However, the issue arises when the specific string's value ...

jqueryjson

Tracking by $index yields an overwhelming amount of results

Encountered an error with Angular that mentioned duplicates in a repeater: To address this, I added the following line of code: rooster in rooster.uren track by $index However, this caused an unexpected issue where multiple panels were created even thoug ...

javascriptangularjs

Guide to displaying a jQuery message following a textbox in PHP

My webpage includes a textbox displaying the current date, with an accompanying jQuery calendar icon for selecting a new date. I've integrated jQuery form validation to alert users if they forget to choose a date before submitting the form. Currently, ...

phpjquery

Guide on attaching a function to an Element that is dynamically loaded using Ajax

Including multiple Divs with the CSS class "hello" on my page. I then utilize Ajax to retrieve additional Divs also with the CSS class "hello". This leads to a code snippet being triggered upon clicking the Divs: $('.hello').click(function(){ ...

javascriptjqueryhtmlajax

The modal in Angular15 will automatically show the date decremented by 1 day whenever it is displayed

Every time I open the date field in a modal, it decrements by one day. Here is the associated typescript file: dob!: DatePipe; rescueDate!: string; dateAdded!: string; openEditPetMenu(template: TemplateRef<any>, petId: number, name: string, ...

htmlangulartypescript