【发布时间】：2017-01-26 08:13:50
【问题描述】：
我正在编写一个 Javascript 代码
请看图片。有 4 个文本框，只能输入一个字符。
最右边字段的id是第一个，最左边的id是第四个
需要满足4个条件
最后一个文本框 - 首先输入最右边/第一个文本框，然后填充第二个，然后是第三个，最后是第四个
然后最右边/第一个文本框值将移动（左移）到第二个，这样值将移动直到所有 4 个字段都被填充 - 见截图插入
如果我们将光标放在除第一个/最右边的任何其他元素上，它会将光标移动到最右边，因为我们只会在最右边输入输入
会有退格功能删除最右边的/第一个，即。第一个字段将被删除第四个字段值将移动到第三个，第三个到第二个，像这样，将发生右移，所有元素都将被删除-见截图删除
在删除时光标没有停留在最右边，我已经再次放置光标并再次删除 - 请再次参考截图删除
在插入期间 - 当值将从第一个移动到第二个时，第二个应该保持焦点，现在第一个/最右边总是保持焦点，我的意思是在插入过程中光标将始终保持在第一个但焦点应该从右到左一个一个地移动
整个解决方案应该是Javascript，不能使用JQuery
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("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 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 {
console.log("Sorry");
}
});<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</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>
</body>
</html>【问题讨论】：
-
首先我会将字段名称更改为前缀+数字格式（id="field0"、id="field1" 等），这样可以大大简化问题，您可以对循环执行检查。甚至，如果您知道只有 4 个字段（即左边的数字），您可以在每个字段中决定如何移动到前一个字段。
-
删除时光标不会停留在最右边的输入中，因为您告诉它不要使用
myEditable.blur()。除非您没有解释清楚，否则光标应该在插入过程中停留在第一个框中。光标出现在具有焦点的框中：您不能“聚焦”第二个框并将光标留在第一个框中。我看到已经发布了带有代码更正的答案。 -
@Traktor53 我很高兴他解决了这个问题，但仍然存在一个问题。但是焦点问题在插入期间没有解决 - 当值将从第一个移动到第二个时，第二个应该保持焦点，现在第一个/最右边总是保持焦点，我的意思是在插入过程中光标将始终保持在第一个但焦点应该从右到左一个一个地移动
-
@Traktor53 他说不可能？真的不可能吗？
-
@Carles 当值将从第一个移动到第二个时，第二个应该保持焦点，现在第一个/最右边总是保持焦点，我的意思是在插入期间光标将始终保持在第一个但是焦点应该从右向左一个一个移动，只有这个问题仍然存在
标签： javascript jquery css html