Commit 5b79fe6

committed

create otp input

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

1 parent 59880f9 commit 5b79fe6Copy full SHA for 5b79fe6

File tree

+100

-0

lines changed

+100

-0

lines changed

Lines changed: 22 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,22 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+ <head>`
	`4`	`+ <meta charset="UTF-8" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />`
	`7`	`+ <title>OTP Input</title>`
	`8`	`+ <link rel="stylesheet" href="styles.css" />`
	`9`	`+ </head>`
	`10`	`+`
	`11`	`+ <body>`
	`12`	`+ <div class="container">`
	`13`	`+ <div id="inputs" class="inputs">`
	`14`	`+ <input class="input" type="text" inputmode="numeric" maxlength="1" />`
	`15`	`+ <input class="input" type="text" inputmode="numeric" maxlength="1" />`
	`16`	`+ <input class="input" type="text" inputmode="numeric" maxlength="1" />`
	`17`	`+ <input class="input" type="text" inputmode="numeric" maxlength="1" />`
	`18`	`+ </div>`
	`19`	`+ </div>`
	`20`	`+ <script src="index.js"></script>`
	`21`	`+ </body>`
	`22`	`+</html>`

Lines changed: 51 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,51 @@`
	`1`	`+const inputs = document.getElementById("inputs");`
	`2`	`+`
	`3`	`+inputs.addEventListener("input", function (e) {`
	`4`	`+ const target = e.target;`
	`5`	`+ const val = target.value;`
	`6`	`+`
	`7`	`+ if (isNaN(val)) {`
	`8`	`+ target.value = "";`
	`9`	`+ return;`
	`10`	`+ }`
	`11`	`+`
	`12`	`+ if (val != "") {`
	`13`	`+ const next = target.nextElementSibling;`
	`14`	`+ if (next) {`
	`15`	`+ next.focus();`
	`16`	`+ }`
	`17`	`+ }`
	`18`	`+});`
	`19`	`+`
	`20`	`+inputs.addEventListener("keyup", function (e) {`
	`21`	`+ const target = e.target;`
	`22`	`+ const key = e.key.toLowerCase();`
	`23`	`+`
	`24`	`+ if (key == "backspace" \|\| key == "delete") {`
	`25`	`+ target.value = "";`
	`26`	`+ const prev = target.previousElementSibling;`
	`27`	`+ if (prev) {`
	`28`	`+ prev.focus();`
	`29`	`+ }`
	`30`	`+ return;`
	`31`	`+ }`
	`32`	`+});`
	`33`	`+`
	`34`	`+inputs.addEventListener("paste", function (e) {`
	`35`	`+ e.preventDefault();`
	`36`	`+ const data = e.clipboardData.getData("text");`
	`37`	`+ const dataArr = data.split("");`
	`38`	`+`
	`39`	`+ let target = e.target;`
	`40`	`+ target.value = "";`
	`41`	`+`
	`42`	`+ dataArr.forEach((val) => {`
	`43`	`+ if (!isNaN(val)) {`
	`44`	`+ target.value = val;`
	`45`	`+ const next = target.nextElementSibling;`
	`46`	`+ if (next) {`
	`47`	`+ target = next;`
	`48`	`+ }`
	`49`	`+ }`
	`50`	`+ });`
	`51`	`+});`

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+.container {`
	`2`	`+ display: flex;`
	`3`	`+ justify-content: center;`
	`4`	`+ align-items: center;`
	`5`	`+ min-height: 100vh;`
	`6`	`+}`
	`7`	`+`
	`8`	`+.input {`
	`9`	`+ width: 40px;`
	`10`	`+ border: none;`
	`11`	`+ border-bottom: 3px solid rgba(0, 0, 0, 0.5);`
	`12`	`+ margin: 0 10px;`
	`13`	`+ text-align: center;`
	`14`	`+ font-size: 36px;`
	`15`	`+ cursor: not-allowed;`
	`16`	`+ pointer-events: none;`
	`17`	`+}`
	`18`	`+`
	`19`	`+.input:focus {`
	`20`	`+ border-bottom: 3px solid orange;`
	`21`	`+ outline: none;`
	`22`	`+}`
	`23`	`+`
	`24`	`+.input:nth-child(1) {`
	`25`	`+ cursor: pointer;`
	`26`	`+ pointer-events: all;`
	`27`	`+}`

Comments

(0)