JavaScriptのカーソル移動

Question

データ入力用のフォームを作成しようとしています。フォームは70項目で構成されます。 各応答は、1〜10の間の単一の整数で構成されます。 フォームを正常に作成しました。 しかし、前の応答が入力された後にカーソルを次の項目に進めたいと思います。 たとえば、最初の応答で「1」を押すと、カーソルは自動的に2番目の応答に移動します。 2番目の応答を入力すると、70個の応答すべてを入力するまで、カーソルは3番目のフィールドなどに移動します。 問題は、カーソルを自動的に移動させる方法がわからないことです。私はこれをExcelで解決しようとしましたが、あきらめて、今はJavaScriptで試しています。

jsfiddle.netで構文が見つかりました。しかし、私はメモ帳でそれを動作させる方法を知らない。 以下の構文を貼り付けました。実線は私がJavaからのHTMLコードであると理解しているものを分けています。メモ帳ではうまく連携していませんし、理由もわかりません。

お時間をいただきありがとうございます。彼らは私たちに海兵隊でこれを教えてくれませんでした！

<div class="container"> 
a: <input type="text" maxlength="5" /> 
b: <input type="text" maxlength="5" /> 
c: <input type="text" maxlength="5" /> 
</div> 

____________________________________________________ 

var container = document.getElementsByClassName("container")[0]; 
container.onkeyup = function(e) { 
    var target = e.srcElement; 
    var maxLength = parseInt(target.attributes["maxlength"].value, 10); 
    var myLength = target.value.length; 
    if (myLength >= maxLength) { 
     var next = target; 
     while (next = next.nextElementSibling) { 
      if (next == null) 
       break; 
      if (next.tagName.toLowerCase() == "input") { 
       next.focus(); 
       break; 
      } 
     } 
    } 
} 

Answer 1

HTMLの<script>タグの中にJavaScriptコードを挿入します。

<div class="container"> 
    a: <input type="text" maxlength="5" /> 
    b: <input type="text" maxlength="5" /> 
    c: <input type="text" maxlength="5" /> 
</div> 
<script> 
    var container = document.getElementsByClassName("container")[0]; 
    container.onkeyup = function(e) { 
     var target = e.target; 
     var maxLength = parseInt(target.attributes["maxlength"].value, 10); 
     var myLength = target.value.length; 
     if (myLength >= maxLength) { 
      var next = target; 
      while (next = next.nextElementSibling) { 
       if (next == null) 
        break; 
       if (next.tagName.toLowerCase() == "input") { 
        next.focus(); 
        break; 
       } 
      } 
     } 
    } 
</script>