我正在编写一个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警报，只是它将不接受任何非整数输入。
在我的代码中，我可以在第一个/最右边的字段中输入非整数，而不能在其他字段中输入，但是我必须在第一个/最右边的字段中禁用非整数输入。
最佳答案
您从未在事件上调用preventDefault（）。
请注意您在其他地方执行的preventDefault。console.log（“ sorry”）;
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 = "";
}
});