すべてのテキストボックスがいっぱいになるまで、右端のテキストボックスから即時のテキストボックスにテキストボックス値を移動するにはどうすればいいですか？

画像をご覧ください。のみ1つの文字すべてのテキストボックスがいっぱいになるまで、右端のテキストボックスから即時のテキストボックスにテキストボックス値を移動するにはどうすればいいですか？

4条件が満たされるべき入力することができる7つのテキストボックスがあり

最後のテキストボックス - 右端/第七のテキストボックスが入力される第一、次いで第1の意志第五など
は次に右端/第七のテキストボックスの値は1/6に（左シフト）シフトすると、すべての7つのフィールドが満たされるまで、このようにして値がシフトするに、次に、充填され
最後/ 7 /右端を除く他の要素にカーソルを置くと、カーソルが右端に移動します。
右端を削除するバックスペース機能があります。 7番目のフィールドは、最初のフィールドの値が第3、第七に、このように、右シフトは、すべての要素が削除される。このように発生するために、第二に移動する削除する

マイコード

<html> 
<head> 
<title>JavaScript to automatically move from one field to another field</title> 

<script type="text/javascript"> 


function movetoPrev(current, nextFieldID) 
{ 
    if (current.value.length >= current.maxLength) 
    { 
    document.getElementById(nextFieldID).focus(); 
    } 
    } 




function movetoLast(current) 
{ 
    if (current.value.length < 1) 
    { 
    document.getElementById("seventh").focus(); 
    } 
    } 



    function isNumber(evt) 
{ 
evt = (evt) ? evt : window.event; 

var charCode = (evt.which) ? evt.which : evt.keyCode; 

if (charCode > 31 && (charCode < 48 || charCode > 57)) 
{ 
    alert("Please enter number"); 
    return false; 
} 

return true; 
} 


</script> 

</head> 

<body> 

<form class="frm1"> 


<input class="inputs" type="text" id="first" size="1" pattern="[0-9]" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="second" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'first')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="third" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'second')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="fourth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'third')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="fifth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'fourth')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="sixth" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'fifth')" onkeypress="return isNumber(event)" onclick="movetoLast(this)" maxlength="1" /> 

<input class="inputs" type="text" id="seventh" size="1" pattern="[0-9]" onkeyup="movetoPrev(this, 'sixth')" onkeypress="return isNumber(event)" maxlength="1" />

出典

2017-01-24 mdv

だから、あなただけの数字を入力できるようにしたい、とあなたは最後の入力のみ編集可能な一つで持つようにしたい、7つの入力を備えています。これはあなたが探しているものないかどうかを確認してください：

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 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..."); 
 
    } 
 
})

<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のみです。また、リスナーを入力にハードコードしないようにリスナーを移動しました。それ以外は、あなたが望むことをやっていると思います。

私が回避できなかった1つの問題（およびバックスペースの後に7番目のフィールドを再度クリックする必要がある理由）は、7番目のフィールドにフォーカスがある場合、新しい値が表示されませんバックスペース。私はそれをぼかしてもうまく動作します。奇妙な。

出典

2017-01-24 18:31:10 Snowmonkey

他のフィールドは編集できませんが、最も右側のフィールドは編集できません。私はOPが右から左に編集できるようにしたいと思っています。 "最後のテキストボックス - 右端/ 7番目のテキストボックスが最初に入力され、次に6番目のテキストボックスが入力され、次に5番目のテキストボックスが入力されます。" – bobjoe

私が読んでいるものから、入力は右端より多くの入力が行われると、値は右から左の方向に入力されます（そして、バックスペースはプロセスを逆にします）。いずれかのフィールドをクリックするとフォーカスが右端に移動し、そこですべての編集が行われます。 – Snowmonkey

条件を再読み込みした後、私はあなたに同意します。 +1 – bobjoe

すべてのテキストボックスがいっぱいになるまで、右端のテキストボックスから即時のテキストボックスにテキストボックス値を移動するにはどうすればいいですか？

答えて

関連する問題