[英]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.