implement going to next element

3 years ago · f3050332d6
5 changed files with 73 additions and 0 deletions
--- a/code.js
+++ b/code.js
@ -0,0 +1,18 @@
+
+window.onload = function(){
+
+    var elems = getInputElements();
+
+    for(var element of elems){
+        element.style.border = "2px solid red"; 
+        
+        if(element.nextElementSibling !== null){
+            //element.addEventListener("keyup", this.focusNextMaskElement);
+            element.addEventListener("change", this.focusNextMaskElement);
+            //element.addEventListener("keypress", this.focusNextMaskElement);
+            element.addEventListener("paste", this.focusNextMaskElement);
+            element.addEventListener("input", this.focusNextMaskElement);
+        }
+    };
+    console.log("hiello");
+}
--- a/functions.js
+++ b/functions.js
@ -0,0 +1,21 @@
+function getInputElements(){
+    return document.getElementsByClassName("mask");
+}
+
+function focusNextMaskElement(){
+    var focussed = document.activeElement;
+
+    if( focussed.classList.contains("mask") === true &&
+        focussed.nextElementSibling !== null
+        ){
+        focussed.nextElementSibling.focus();
+    }
+}
+
+function clearForm(){
+    var elems = getInputElements();
+
+    for(var e of elems){
+        e.value = "";
+    }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+    <title>input mask</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script src="functions.js"></script>
+</head>
+<body>
+    <section id="auth">
+        <form action="">
+            <input type="text" class="mask">
+            <input type="text" class="mask">
+            <input type="text" class="mask">
+            <input type="text" class="mask">
+            <input type="text" class="mask">
+        </form>
+        <button onclick="clearForm()">Clear</button>
+    </section>
+    <script src="code.js"></script>
+</body>
+</html>
--- a/inputMask.code-workspace
+++ b/inputMask.code-workspace
@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,4 @@
+input {
+    max-width: 100px;
+    font-size: xx-large;
+}