diff --git a/code.js b/code.js new file mode 100644 index 0000000..3097e27 --- /dev/null +++ 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"); +} \ No newline at end of file diff --git a/functions.js b/functions.js new file mode 100644 index 0000000..41ac899 --- /dev/null +++ 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 = ""; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4bb9a52 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + input mask + + + + + +
+
+ + + + + +
+ +
+ + + \ No newline at end of file diff --git a/inputMask.code-workspace b/inputMask.code-workspace new file mode 100644 index 0000000..876a149 --- /dev/null +++ b/inputMask.code-workspace @@ -0,0 +1,8 @@ +{ + "folders": [ + { + "path": "." + } + ], + "settings": {} +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..253297d --- /dev/null +++ b/style.css @@ -0,0 +1,4 @@ +input { + max-width: 100px; + font-size: xx-large; +} \ No newline at end of file