<分区>
标签 javascript jquery css html
<分区>
请看图片。有 7 个文本框，只能输入一个字符。
要满足4个条件
最后一个文本框 - 最右边/第七个文本框将首先输入，然后填充第六个，然后是第五个，依此类推
然后最右边/第七个文本框的值将移动(左移)到第六个，这样值将移动直到所有 7 个字段都被填充
如果我们将光标放在除最后一个/第七个/最右边之外的任何其他元素上，它会将光标移动到最右边。
将有退格功能删除最右边的，即。第七个字段将被删除第一个字段值将移动到第二个，第二个到第三个，第六个到第七个，这样，将发生右移，这样所有元素都将被删除
整个解决方案应使用 Javascript ，不能使用 JQuery
请引用上图
Javascript 代码
var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("seventh").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("You did something else...");
}
})
HTML 代码
<form>
<input type="text" id="first" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />
</form>
这段代码有两个问题
首先它在 JSBin 中工作 - https://jsbin.com/duxogezake/edit 同样，它在 Fiddle 中工作，但在 Chrome 55 或任何其他浏览器中不工作 但无论如何它都应该在 chrome 中工作
当我们使用退格键时，光标应保留在最后一个/最右边/第七个文本框中，但光标不会保留 - 我们必须再次将光标放在最后一个文本框中以执行操作 (阅读之前顶部的第四个条件)
最佳答案
试试这个:按下面的“运行代码片段”，让我知道它是否适合您。
我在我的本地主机上测试了这个。它在我的 Chrome 和 Opera 中都运行良好，光标现在停留在最右边的输入字段中。
尽管如此，您的代码中似乎还有其他错误，因为在输入值移位时会出现文本“Ck”和“Dv”。 (编辑:没关系。我认为这是因为我输入了一些字符而不是数字，您似乎限制了这些字符。)
var myInputs = document.getElementsByTagName("input");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("seventh").focus();
})
}
/*wrap your code inside window.load to prevent premature executuion*/
window.onload = function() {
console.log('window has loaded');
var myEditable = document.getElementById("seventh");
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 bumped 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("You did something else...");
}
/*keep the cursor on the seventh input field right after hitting backspace and shifting values*/
myEditable.focus();
});
}<form>
<input type="text" id="first" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />
</form>关于Javascript - 为什么这段 Javascript 代码在 JSFiddle 和 JSBin 中有效，但在任何浏览器中都无效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41842340/