Browse Source

implement going to next element

master
hoschi-it 2 years ago
parent
commit
f3050332d6
  1. 18
      code.js
  2. 21
      functions.js
  3. 22
      index.html
  4. 8
      inputMask.code-workspace
  5. 4
      style.css

18
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");
}

21
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 = "";
}
}

22
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>

8
inputMask.code-workspace

@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}

4
style.css

@ -0,0 +1,4 @@
input {
max-width: 100px;
font-size: xx-large;
}
Loading…
Cancel
Save