如何将文本框值从最右边的文本框移动到左侧的直接文本框，直到所有文本框都填满？答案

【问题标题】：How to move text box values from the rightmost textbox to its immediate text box to the left until all the text boxes are filled?如何将文本框值从最右边的文本框移动到左侧的直接文本框，直到所有文本框都填满？
【发布时间】：2017-06-09 15:06:42
【问题描述】：

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

需要满足4个条件

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

我的代码

<html>
<head>
 <title>JavaScript to automatically move from one field to another   field</title>

<script type="text/javascript">


 function movetoPrev(current, nextFieldID)
 {
  if (current.value.length >= current.maxLength)
    {
    document.getElementById(nextFieldID).focus();
    }
  }




function movetoLast(current)
{
  if (current.value.length < 1)
    {
    document.getElementById("seventh").focus();
    }
  }



  function isNumber(evt)
{
evt = (evt) ? evt : window.event;

var charCode = (evt.which) ? evt.which : evt.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
{
    alert("Please enter number");
    return false;
}

return true;
 }


</script>

</head>

<body>

<form class="frm1">


<input class="inputs" type="text" id="first" size="1" pattern="[0-9]" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="second" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'first')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="third" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'second')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="fourth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'third')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="fifth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'fourth')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="sixth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'fifth')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" />

<input class="inputs" type="text" id="seventh" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'sixth')" onkeypress="return isNumber(event)" maxlength="1" />

【问题讨论】：

标签： javascript css html

【解决方案1】：

所以您有七个输入，您希望只能输入数字，并且您希望最后一个输入是唯一可编辑的。看看这是否符合您的要求：

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

<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。另外，我已经移动了监听器，这样它们就不会被硬编码到输入中。除此之外，我认为它正在做你想做的事。

我无法解决的一个问题（以及您必须在退格后重新单击第七个字段的原因）是，如果第七个字段有焦点，它不会在退格后显示新值.如果我模糊它，它工作正常。奇怪。

【讨论】：

我不能编辑除最右边的任何其他字段。我相信 OP 希望能够从右到左编辑，因为最右边的内容已被填充。 "最后一个文本框 - 最右边/第七个文本框将首先输入，然后第六个将被填充，然后是第五个，依此类推"
从我正在阅读的内容来看，输入预计只会发生在最右边的输入上，并且随着更多输入的发生，这些值会以从右到左的方向填充（并且退格键会反转过程）。单击任何字段会将焦点移到最右侧，所有编辑都在那里进行。
考虑到措辞，这有点令人困惑，但我认为我们已经接近了正轨。呵呵。
注意:: event.key 在 Chrome 49 或 Safari 10 中不受支持。这就是它不适合我的原因。
用 event.which 重做它（玩弄小提琴）——这不是一个巨大的变化，但它应该仍然有效。