JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<a href="#" id="field0">sdsd</a>
<form>
    Field 1: <input type="text" id="field1" tabindex=1 /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 autofocus="true"/><br />
    Field 4: <input type="text" id="field4" tabindex=4 /><br />     
</form>

CSS

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

.cardcontainer img {
	animation: zoominoutsinglefeatured 1s infinite ;
}

JavaScript

var myInput = document.getElementById("field4");
if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

var myInput1 = document.getElementById("field0");
if(myInput1.addEventListener ) {
    myInput1.addEventListener('keydown',this.keyHandler2,false);
} else if(myInput1.attachEvent ) {
    myInput1.attachEvent('onkeydown',this.keyHandler2); /* damn IE hack */
}

function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field0').focus();
        return false;
    }
}
function keyHandler2(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field1').focus();
        return false;
    }
}