JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<input>
<form id="personalData">
    <div class="form-element"><label for="name">Name:</label><input type="text" id="name"></div>
    <div class="form-element"><label for="surname">Surname:</label><input type="text" id="surname"></div>
    <div class="form-element"><label for="phone">Phone:</label><input type="number" id="phone"></div>
    <div class="form-element"><label for="address">Address:</label><input type="text" id="address"></div>
</form>
<form id="additionalData">
    <input type="hidden">
    <div class="form-element"><label for="skills">Skills:</label><input type="text" id="skills"></div>
    <div class="form-element"><label for="expertise">Expertise:</label><input type="text" id="expertise"></div>
    <div class="form-element"><label for="references">References:</label><input type="text" id="references"></div>
    
    
</form>
<div id="errorViewer">
</div>

CSS

body{
    font-family: open sans;
    font-size: 12px;
    color: gray;
    margin: 15px;
}
form{
    padding: 15px;
    display: block;
    background: #f0f0f0;
    border: solid 1px gainsboro;
    margin: 0 0 15px 0;
}
form:last-child{
    margin: 0 0 0 0;
}
label{
    width: 70px;
    display: inline-block;
}
input{
    outline: none;
    padding: 5px 15px;
    width: 300px;
}
.form-element{
    display: block;
    padding: 0 0 15px 0;
}
.form-element:last-child{
    padding: 0 0 0 0;
}
#errorViewer{
    display: none;
    background: black;
    color: white;
    padding: 15px;
}

JavaScript

window.onload = function(){

    window.onkeydown = function(e) {
        if (e.keyCode === 9) {
            return false;
        }
    }

    function returnReverseCount($elements_array){
        var reverseCount = $elements_array.length-1;
        for(var i=reverseCount; i>=0; --i){
            if($elements_array[i].offsetWidth !== 0 && $elements_array[i].offsetHeight !== 0){
                return i;
            }
        }
    }
    function returnStartingCount($elements_array){
        var count = $elements_array.length-1;
        for(var i= 0; i <= count; i++){
            if($elements_array[i].offsetWidth !== 0 && $elements_array[i].offsetHeight !== 0){
                return i;
            }
        }
    }
    var allElements = document.querySelectorAll('input,button,textarea,select');
    [].forEach.call(allElements,function(element,index,array){
        element.onfocus = function(){
            try{
                var parentForm = element.form;
                var allFormElements = parentForm.elements;
            }catch(err){
                return false;
            }

            allFormElements[returnReverseCount(allFormElements)].onkeydown = function(e){
                var keyCode = e.keyCode || e.which;
                if (keyCode == 9){
                    e.preventDefault();
                    allFormElements[returnStartingCount(allFormElements)].focus();
                }
            };
            window.onkeydown = function(e) {
                if (e.keyCode === 9) {
                    return true;
                }
            }
        };
        element.onblur = function(){
            window.onkeydown = function(e) {
                if (e.keyCode === 9) {
                    return false;
                }
            }
        }
    });
    
};