Question

请看图片。有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" />

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

是的，它只是javascript。此外，我已经移动了听众，以便他们不会硬编码到输入。除此之外，我认为它正在做你想做的事。

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

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

1 个答案: