JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="container">
  <input type="text" class="text" maxlength="2">
  /
  <input type="text" class="text" maxlength="2">
  /
  <input type="text" class="text" maxlength="4">  
</div>

<!-- <input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" /> -->

CSS

input {
  border:1px solid transparent;
  width:40px;
}
.container {
  border:1px solid;
  padding:5px;
  width:200px;
}
input:focus {
  box-shadow:none;
  outline:none;
}

JavaScript

let container = document.getElementsByClassName('container')[0];
/* const input = document.querySelector('input'); */

container.onkeyup = change;


function change(e) {
console.log(e)
	var target = e.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() == "input") {
                next.focus();
                break;
            }
        }
    }
}

/* var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() == "input") {
                next.focus();
                break;
            }
        }
    }
} */