Javascript——为什么这段Javascript代码在JSFIDLE&；JSBin，但不在任何浏览器上？

请看图片。共有7个文本框，其中只能输入一个字符

必须满足4个条件

最后一个文本框-最右边/第七个文本框将首先输入，然后填充第六个文本框，然后填充第五个文本框，依此类推

然后，最右边/第七个文本框的值将移动（左移）到第六个，并以这种方式移动值，直到所有7个字段都被填充

如果我们将光标放在除最后一个/第七个/最右边之外的任何其他元素上，它将把光标移到最右边

将有退格功能，该功能将删除最右边的字段，即第七个字段将被删除。第一个字段值将移动到第二个、第二个到第三个、第六个到第七个，这样，将发生右移，所有元素都将被删除

整个解决方案应使用Javascript，不能使用JQuery

请参考上图

var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
 myInputs[i].addEventListener("click", function() {
 document.getElementById("seventh").focus();
 })
}

myEditable.addEventListener("keydown", function(evt) {
 /****
   *  A few things are handled here: we can check if
   *  the input is a numeric, and we can check if the input
   *  is a backspace. Nothing else is allowed.
  ****/
  if (evt.which == 8) {
  // If a backspace has been pressed, move all the input
  //  values one field UP.

      myEditable.blur();
     for (var i = myInputs.length - 1; i >= 1; i--) {
     myInputs[i].value = myInputs[i - 1].value;
    }
    myInputs[0].value = "";
   } else if (evt.which >= 48 && evt.which <= 59) {
    // Here, we have a number. Everything gets shifted to the LEFT

    if (myInputs[0].value == "") {
     for (var i = 0; i < myInputs.length - 1; i++) {
      myInputs[i].value = myInputs[i + 1].value;
      }
     myEditable.value = String.fromCharCode(evt.which);
   }
  } else {
  console.log("You did something else...");
 }
})

 <form>
<input type="text" id="first" size="1" maxlength="1" />  
<input type="text" id="second" size="1" maxlength="1" />  
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />  
</form>

Javascript代码

var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
 myInputs[i].addEventListener("click", function() {
 document.getElementById("seventh").focus();
 })
}

myEditable.addEventListener("keydown", function(evt) {
 /****
   *  A few things are handled here: we can check if
   *  the input is a numeric, and we can check if the input
   *  is a backspace. Nothing else is allowed.
  ****/
  if (evt.which == 8) {
  // If a backspace has been pressed, move all the input
  //  values one field UP.

      myEditable.blur();
     for (var i = myInputs.length - 1; i >= 1; i--) {
     myInputs[i].value = myInputs[i - 1].value;
    }
    myInputs[0].value = "";
   } else if (evt.which >= 48 && evt.which <= 59) {
    // Here, we have a number. Everything gets shifted to the LEFT

    if (myInputs[0].value == "") {
     for (var i = 0; i < myInputs.length - 1; i++) {
      myInputs[i].value = myInputs[i + 1].value;
      }
     myEditable.value = String.fromCharCode(evt.which);
   }
  } else {
  console.log("You did something else...");
 }
})

 <form>
<input type="text" id="first" size="1" maxlength="1" />  
<input type="text" id="second" size="1" maxlength="1" />  
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />  
</form>

var myInputs=document.getElementsByTagName（“输入”）；
var myEditable=document.getElementById（“第七”）；
对于（变量i=0；i=1；i--）{
myInputs[i].value=myInputs[i-1].value；
}
myInputs[0]。值=”；
}否则，如果（evt.which>=48&&evt.which尝试以下操作：按下面的“运行代码片段”，并让我知道它是否对您有效

我在本地主机上进行了测试，它在我的Chrome和Opera中运行良好，光标现在停留在最右边的输入字段中

尽管如此，您的代码中似乎还有其他错误，因为文本“Ck”和“Dv”在输入值移动时出现。（编辑：无需担心。我想这是因为我输入了一些字符而不是数字，而您似乎限制了这些字符。）


var myInputs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i=1；i--）{
myInputs[i].value=myInputs[i-1].value；
}
myInputs[0]。值=”；
}else if（evt.which>=48&&evt.which）在解析
的DOM之前，您的代码可能正在运行。JSBin将您的代码放在
标记末尾的
块中，因此当它运行DOM时（主要是）完成。如果你把
放在
中，那就是你的问题。检查你的Chrome开发者控制台以获取错误详细信息。@Pointy它也在fiddle中工作，那么解决方法是什么。它应该在Chrome 55I中工作。我在Chrome和Opera中打开了你的JSBin链接。“规则”您指定光标始终位于最右边的输入字段可以正常工作，但“输入值的移动”不能正常工作。它允许我做的只是在最右边的字段输入一个字符。在这之后，不再接受任何输入。@mdv yes这正是会发生的情况。JSFiddle放入您的JavaScript代码（默认情况下）在窗口中“加载”事件处理程序，因此也避免了相同的问题。