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>

1 thought on “Autofocus after <input> and again after all inputs”

  1. I’m not sure if I understood you question, but here’s my approach:
    I’ d use recursive functions to ensure it’s called after the user did something:

        function rec(num){
         if (num<NumberOfElements){
         let el=document.querySelectorAll(".text")[num]//select current element
         el.addEventListener("input", function(){//check for input
        //do something
    
        //. /do something
         num++
         rec(num)//recall the recursive function (“loop again”)
        }
        }}
    
    

    I didn’t tried the code and you’ll have to customise this for your needs.

    Reply

Leave a Comment