

エンターキー押下など、特定のイベント発生時にタブキー押下と同様の動作（次の要素へフォーカス移動）を行いたいです。

例えば、以下のコードで試したところ、keyup（keyCode = 9）のイベントはトリガーされますが、フォーカスは移動しませんでした。このような
`key*` 系のイベントを手動でトリガーしてもフォーカスは移動しないと考えてよいでしょうか。  
代替手段としてどのような方法があるでしょうか？

[code]

    <!DOCTYPE html>
    <html>
    <body>
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(document).on("keyup", "input", function (e) {
                console.log(e.keyCode);
                if (e.keyCode == 13) {
                    var event = $.Event("keyup")
                    event.keyCode = 9;
                    $(this).trigger(event);
                    return false;
                }
            });
        </script>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-09-08T11:09:15.497
48213
2018-09-20T02:03:04.707
3925
question
javascript html jquery html5
次の要素へフォーカスを移動（タブキー押下をエミュレート）したい

[code]

    このような key* 系のイベントを手動でトリガーしてもフォーカスは移動しないと考えてよいでしょうか。
    
[/code]

はい。人工的に作られた入力系イベントを投げても、ブラウザのデフォルト動作は起きないと規格で決まっています。

エミュレートするには、[ブラウザが次の要素を探すアルゴリズム](https://html.spec.whatwg.org/multipage/interaction.html#sequential-
focus-navigation)をJavaScriptで再実装するしかないです。そういうライブラリが既にあるかもしれないですね。


CC BY-SA 4.0
2018-09-19T13:37:40.997
48562
2018-09-19T13:37:40.997
3475
48213
answer


HTMLに読み込まれた要素順であればjquery使えば手っ取り早いです。  
選択可能な要素を配列化し、要素にフォーカスするだけかと思います。  
ただフォーカス位置についてはグローバルに選択位置を保存するか、  
現在のフォーカス状態から位置を割り出すしかないかと思います。

[code]

    var focusPos = 0;
    var sec = 0;
    var elements = [];
    $(document).ready(function(){
      sec = 0;
      elements = $('input[type="text"]:enabled');
      $('input[type="text"]:enabled')
      .focusin(function(e) {
        for(no in elements){
          if(e.target == elements[no]){
            focusPos = no;
            break;
          }
        }
      })
      .focusout(function(e) {
        focusPos=0;
      });
      setInterval(function(){
        sec++;
        if($("#nextFocus").attr("max")<=sec){
          sec=0;
          focusPos++;
          if(elements.length<=focusPos){focusPos=0;}
          elements[focusPos].focus();
        }
        $("#nextFocus").val(sec);
      },1000);
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <progress id="nextFocus" max="5" value="0"></progress><br />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
[/code]


CC BY-SA 4.0
2018-09-20T02:03:04.707
48572
2018-09-20T02:03:04.707
48213
answer