Question

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

要满足4个条件

最后一个文本框 - 最右边/第七个文本框将先输入，然后第六个文本框将被填充，然后是第五个，依此类推
然后最右边/第七个文本框值将移位（左移）到第六个，这样值将移动，直到所有7个字段都被填充
如果我们将光标放在除最后一个/第七个/最右边之外的任何其他元素上，它会将光标移动到最右边。
会有退格函数删除最右边的，即。第七个字段将被删除第一个字段值将移动到第二个，第二个到第三个，第六个到第七个，这样，右移将以这种方式发生所有元素都被删除

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

https://i.stack.imgur.com/dISMA.jpg

请参阅上面的图片

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...");
 }
})

HTML代码

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

在此代码中有两个问题

首先它在JSBin中工作 - https://jsbin.com/duxogezake/edit 同样，它在Fiddle中工作，但在Chrome 55或任何其他浏览器中都没有但它应该以任何方式使用chrome
当我们使用退格键时，光标应保留在最后/最右/第七个文本框中，但光标不会保留 - 我们必须再次放置光标＆amp;再次在最后一个文本框中进行操作（读取前面顶部的第四个条件）

Answer 1

尝试使用：按下面的“运行代码段”，告诉我它是否适用于您。

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

尽管如此，您的代码中似乎还有其他错误，因为当输入值移位时，文本“Ck”和“Dv”会出现。 （编辑：没关系。我认为这是因为我输入了一些字符而不是数字，你似乎已经限制了。）

var myInputs = document.getElementsByTagName("input");
    for (var i = 0; i < myInputs.length; i++) {
      myInputs[i].addEventListener("click", function() {
        document.getElementById("seventh").focus();
      })
    }
    
    /*wrap your code inside window.load to prevent premature executuion*/
    window.onload = function() {
    console.log('window has loaded');
      var myEditable = document.getElementById("seventh");
      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 bumped 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...");
        }
    
        /*keep the cursor on the seventh input field right after hitting backspace and shifting values*/
        myEditable.focus();
    
      });
    
    }

<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 - 为什么这段Javascript代码在JSFiddle＆amp; JSBin但不在任何浏览器上？

1 个答案: