<input> 后自动对焦并在所有输入后再次自动对焦答案

【问题标题】：Autofocus after <input> and again after all inputs<input> 后自动对焦并在所有输入后再次自动对焦
【发布时间】：2021-01-19 20:46:35
【问题描述】：

在右侧 div 上创建一个输入数字的检查，在左侧 div 上使用随机数

我不明白如何确保：在第一个输入中输入 smth 后，它必须专注于第二个等等。

以及在所有填充输入之后，它必须再次关注第一个输入

对不起我的英语

请不要提供 jquery

'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>

【问题讨论】：

调用 element.select() ?
我试过了 (var i=0;i (script.js:38)

标签： javascript

【解决方案1】：

我不确定我是否理解您的问题，但这是我的方法：我会使用递归函数来确保在用户做某事后调用它：

    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”)
    }
    }}

我没有尝试过代码，您必须根据自己的需要对其进行自定义。

【讨论】：