LoginSignup
10
9

More than 5 years have passed since last update.

指定した番号のtabindexがあるtextボックスにfocus移動したい

Posted at

こんにちわ~
犬好きの@wannkoromaru|@wankoromaru_kunです。
最近うちのチワプ-(9ヶ月齢)は、ゴムボールのダイレクトキャッチに夢中です。
   ......

さて・・・

HTMLのtabindexってありますよね。

<input type="text" name="hoge" value="" tabindex="123">

・・・みたいなやつです。

画面上にいろいろtabindexを割り付けたinput type="text"があるわけですが、処理の都合で、あるtextボックスからfocusOutしたとき、特定のtabindexにfocus移動したくなっちゃったわけです。(・・・ホントはそんなややこしいことしたくなかった(/_・)/)

・・で、やり方をググったのですが、わかるまでちょっと時間がかかった(同類の記事がそれほど多くないような気がした)のでメモめもです。

....

下記のサンプルは、EnterキーでTABキーの動作が出来るようにもしろ!と言われたした時のcodeをとってきたものです。・・ご勘弁を~

  $(document).on('keypress', 'input[type="text"]', function(ev) {
    var $me = $(this);
    var $list = $('input[type="text"]:enabled');
    if (ev.keyCode == 13) {
      var metabindex = $me[0].tabIndex;

      $list.each(function(index){
        if ($(this).is($me)) {
          var targetIndex = (!event.shiftKey) ? (metabindex + 1) : (metabindex - 1);
          $('[tabindex='+targetIndex+']').focus();
          ev.preventDefault();
        }
      });

    }
  });

Enterが押されたとき、

var metabindex = $me[0].tabIndex; 

で、フォーカスの抜ける前のtabindexを取得できました。(ieの開発者ツールF12で確認しました)

var targetIndex = (!event.shiftKey) ? (metabindex + 1) : (metabindex - 1);

のところで、次に移動するtabindexを計算しています。
この例は、単にShiftを押しながらで無ければ現在のtabindexの値にプラス1を・・Shiftを押しながらであれば、マイナス1を・・しているだけです。

そして、その計算したtabindexにfocusを移動するとき、

$('[tabindex='+targetIndex+']').focus();

・・・を実行します。

要は・・・・

$('[tabindex=999]').focus();

とすれば、tabindexが999の所にfocusがうつるというところでしょうか?

後記;
書き終えれば、たいした話ではないのかな (?_?>
でも、どこかでお役に立てればうれしいです。

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9