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

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

javascript jquery css html

Javascript 如何在最右边的文本框中禁用非整数输入？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在编写一个JavaScript代码请看图片。有4个文本框，其中只能输入一个字符最右边字段的id是第一个，最左边的id是第四个必须满足4个条件最后一个文本框-首先输入最右边/第一个文本框，然后填充第二个文本框，然后填充第三个文本框，最后填充第四个文本框然后，最右边/第一个文本框的值将移动（左移）到第二个文本框，并且以这种方式，值将移动，直到所有4个字段都被填充为止-请参见屏幕截图插入如果我们将光标放在除第一个/最右边的元素之外的任何其他元素上，它会将光标移动到最右边，因为我们只会在

我正在编写一个JavaScript代码

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

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

必须满足4个条件

最后一个文本框-首先输入最右边/第一个文本框，然后填充第二个文本框，然后填充第三个文本框，最后填充第四个文本框

然后，最右边/第一个文本框的值将移动（左移）到第二个文本框，并且以这种方式，值将移动，直到所有4个字段都被填充为止-请参见屏幕截图插入

如果我们将光标放在除第一个/最右边的元素之外的任何其他元素上，它会将光标移动到最右边，因为我们只会在最右边输入输入

将有退格功能，删除最右边/第一个字段，即第一个字段将被删除第四个字段值将移动到第三个、第三个到第二个，这样，将发生右移，所有元素都将被删除-参见屏幕截图删除

--屏幕截图插入

--截图删除

整个解决方案应使用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>


var myInputs=document.getElementsByTagName（“输入”）；
var myEditable=document.getElementById（“第一”）；
对于（变量i=0；i=48&&evt.which=1；i--）{
myInputs[i].value=myInputs[i-1].value；
}
myInputs[0]。值=”；
}
});

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

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

您从未对事件调用过preventDefault（）。请注意您执行console.log的else中的默认值（“对不起”）；

var myInputs=document.getElementsByTagName（“输入”）；
var myEditable=document.getElementById（“第一”）；
对于（变量i=0；i=48&&evt.which=1；i--）{
myInputs[i].value=myInputs[i-1].value；
}
myInputs[0]。值=”；
}
});

你可以使用

你可以使用html5限制吗？@Michael Coker我这样做有问题-你的
可能的副本应该在
中。
的唯一有效子项是
和。
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 = "";
  }
});