Question

我正在编写一个JavaScript代码

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

最右边的字段的id是第一个，最左边的id是第四个

要满足4个条件

最后一个文本框 - 最右边/第一个文本框将先输入，然后第二个文本框将被填充，然后是第三个，最后是第四个
然后最右边/第一个文本框值将移位（左移）到第二个，这样值将移动，直到所有4个字段都被填充 - 参见屏幕截图插入
如果我们将光标放在除第一个/最右边之外的任何其他元素上，它会将光标移动到最右边，因为我们只会在最右边输入
将有退格功能，将删除最右边/第一个，即。第一个字段将被删除第四个字段值将移动到第三个字段，第三个字段将移动到第三个字段，这样，右移将以这种方式发生所有元素都将被删除 - 请参阅截图删除

https://i.stack.imgur.com/w8eUg.jpg - 屏幕截图插入

https://i.stack.imgur.com/fl8Gg.jpg - 屏幕截图删除

整个解决方案应该是JavaScript，不能使用jQuery

<form>

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

 <html>
 <head>
</head>
<body>

<form>

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

</form>

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

myEditable.addEventListener("keypress", function(evt) {


if (evt.which >= 48 && evt.which <= 57) {
// 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 {

evt.preventDefault();   // newly added to prevent non integer inputs in rightmost field
console.log("Sorry");
  }
})


 myEditable.addEventListener("keyup", function(evt) {

 if (evt.which == 8) {

 //myEditable.blur();
 for (var i = myInputs.length - 1; i >= 1; i--) {
  myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
 }
});
</script>

</body>
</html>

我只面临一个问题 - 非整数输入被禁用，没有JavaScript警报，只是它不接受任何非整数输入。

在我的代码中，我可以在第一个/最右边的字段中输入非整数，而不是在其他字段中，但我必须在第一个/最右边的字段中禁用非整数输入。

Answer 1

你从未在事件上调用preventDefault（）。注意你执行console.log的else中的preventDefault（＆＃34;抱歉＆＃34;）; https://jsfiddle.net/jmuc36hs/

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

myEditable.addEventListener("keypress", function(evt) {

if (evt.which >= 48 && evt.which <= 57) {
    // 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 {
   evt.preventDefault();
    console.log("Sorry");
   }
 });

   myEditable.addEventListener("keyup", function(evt) {
  if (evt.which == 8) {
    //myEditable.blur();
    for (var i = myInputs.length - 1; i >= 1; i--) {
      myInputs[i].value = myInputs[i - 1].value;
    }
    myInputs[0].value = "";
  }
});

如何在最右边的文本框中禁用非整数输入？

1 个答案: