Autofocus after <input> and again after all inputs

Creating a check for entered numbers on the right div with random numbers on the left div

I don’t understand how to make sure that:
after entering smth in the first input, it must focus on the second and etc.

And how after all filled inputs, it must focus again on the first input

sorry for my english

do not offer jquery, please

'use strict';

let codeNum = document.querySelectorAll('.codeNumber'),
    inputNum = document.querySelectorAll('input');

function randomCode() {
    codeNum.forEach(function(item) {
        item.textContent = randomInteger(0, 9);
    })
    function randomInteger(min, max) {
        // получить случайное число от (min-0.5) до (max+0.5)
        let rand = min - 0.5 + Math.random() * (max - min + 1);
        return Math.round(rand);
      }
}
randomCode();

let new1 = [];
let new2 = [];

function checkInput() {
    for (var i=0;i<codeNum.length;i++) {

            new1[i] = codeNum[i].innerHTML;
            new2[i] = inputNum[i].value;
    }
    if (JSON.stringify(new1)==JSON.stringify(new2)) {
        randomCode();
    }
    console.log(JSON.stringify(new1));
    console.log(JSON.stringify(new2));

}

for (var i=0;i<codeNum.length;i++) {
    inputNum[i].addEventListener('input', checkInput) 
}
@import url('https://fonts.googleapis.com/css?family=Raleway:200');

html, body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  background: #1D1F20;
}

.text {
  width: 25px;
  height: 47px;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  background-color: #1D1F20;
  outline: none;
  font-size: 2.5rem;
  font-family: 'Raleway';
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

span {
  position: absolute;
  top: 6%;
}

#box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pin-Pan! by Asad</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="gradient-border" id="box"> 
        <div class="numbers codeNumber">1</div>
        <div class="numbers codeNumber">1</div>
        <div class="numbers codeNumber">1</div>
        <div class="numbers codeNumber">1</div>
    </div>

    <div class="gradient-border box-2" id="box"> 
        <span>password:</span>
        <div class="numbers">
            <input type="number" autofocus class="text" maxlength="1" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==1) return false;">
        </div>
        <div class="numbers">
            <input type="number" class="text" maxlength="1" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==1) return false;">
        </div>
        <div class="numbers">
            <input type="number" class="text" maxlength="1" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==1) return false;">
        </div>
        <div class="numbers">
            <input type="number" class="text" maxlength="1" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==1) return false;">
        </div>
    </div>

    <script src="js/script.js"></script>
</body>
</html>

29 thoughts on “Autofocus after <input> and again after all inputs”

Leave a Comment