我正在写一段 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>最佳答案
看看这个。
HTML:
<input type="text" id="input3" onfocus="HandleFocus(this)" onkeypress="return HandleKeys(event, this)" value="" style="width:40px">
<input type="text" id="input2" onfocus="HandleFocus(this)" onkeypress="return HandleKeys(event, this)" value="" style="width:40px">
<input type="text" id="input1" onfocus="HandleFocus(this)" onkeypress="return HandleKeys(event, this)" value="" style="width:40px">
<input type="text" id="input0" onfocus="HandleFocus(this)" onkeypress="return HandleKeys(event, this)" value="" style="width:40px">
Javascript:
function HandleFocus(obj)
{
if (obj.id.indexOf("0")==-1) {
document.getElementById("input0").focus();
}
}
var content = "";
function HandleKeys(e, obj)
{
if (obj.id.indexOf("0")!=-1)
{
var c = e.which;
if ( (c==8)&&(content.length>0) ) {
content = content.substr(0, content.length -1);
} else if ( (c>=48)&&(c<=57)&&(content.length<4) ) {
content += String.fromCharCode(c);
}
for (var i=0; i<4; i++)
document.getElementById("input" + i.toString()).value = (i>=content.length) ? "" : content[content.length-1-i];
}
return false;
}
您可以在 JSfiddle 中运行它
关于Javascript - 在填充前一个文本框后，如何在 Javascript 中将焦点从一个文本框移动到另一个文本框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41869207/