[英]Javascript - How to move focus from one textbox to another in Javascript after the previous text box is filled?
我正在写一个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>
</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> <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) { /**** * 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"); } }) myEditable.addEventListener("keyup", 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 = ""; } }); </script> </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中运行它
</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> <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) { /**** * 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"); } }) myEditable.addEventListener("keyup", 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 = ""; } }); </script> </html>
</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> <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("keydown", function(evt) { if (!(evt.which >= 48 && evt.which <= 59)){ evt.preventDefault(); } }); myEditable.addEventListener("keypress", 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"); } }) myEditable.addEventListener("keyup", 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 = ""; } }); </script> </html>
如何在不使用JavaScript的情况下将一个TextBox值移至另一个TextBox
[英]How to One TextBox Value Move to another TextBox unsing JavaScript
在JavaScript / HTML中按下按钮后如何将文本从一个文本框复制到另一个文本框
[英]How to copy text from one textbox to another after you push a button in JavaScript/HTML
如何将文本框的值从最右边的文本框移动到左边的直接文本框，直到所有文本框都被填充？
[英]How to move text box values from the rightmost textbox to its immediate text box to the left until all the text boxes are filled?
将焦点从表格的一列移动到另一列时，如何调用 javascript function
[英]how can I call javascript function when move the focus from one column to another column of the table
使用javascript或mootools将文本从一个div移动到另一个
[英]move text from one div to another with javascript or mootools
尝试在JavaScript的帮助下使用键盘将焦点从一个锚标记移到另一个锚标记
[英]Trying to use keyboard to move focus from one anchor tag to another with the help of javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.