質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

動的に生成したliに当てたfocusを移動する方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,745

akiiro_

score 18

 前提・実現したいこと

動的に生成したliに当てたfocusを上下キーで移動させたい。

suggestを作成しています。
form内でkeyupされるとformの下にsuggestが表示されます。
liの中身はajaxで引っ張ってきてます。

 発生している問題・エラーメッセージ

liにfocusは当たるがfocusの移動ができない。

 該当のソースコード

<input type="text" class="profile-edit-add-tag-myself-search js-profile-edit-add-skill-tag-myself-search">
<ul class="profile-edit-suggest-list js-profile-edit-skill-suggest-list"></ul>
$(function () {
  var $addMyselfSkillTagSearch = $('.js-profile-edit-add-skill-tag-myself-search');
  var $suggestSkillList = $('.js-profile-edit-skill-suggest-list');

  $addMyselfSkillTagSearch.on('keyup', function (e) {
    if (!(eKeyCode === 38 || eKeyCode === 40)) {
      $.ajax({
        //...省略...
      })
      .then(function (data) {
        for (var item in data) {
          var dynamicSuggestListItem = $('<li class="profile-edit-suggest-list-item js-profile-edit-suggest-list-item js-move-focus" tabindex="-1">' + data[item] + '</li>');

          $suggestSkillList.append(dynamicSuggestListItem);
        }
      });
    } else {
      var $moveFocus = $('.js-move-focus');
      var moveFocusLength = $moveFocus.length;
      var moveFocusActive = $moveFocus.is(':focus');

      if (e.keyCode === 38) {
        // ここに上キーの処理
      } 

      if (e.keyCode === 40) {
        // ここに下キーの処理1
        if (!moveFocusActive) {
          $moveFocus.eq(0).focus();
        } else {
          for (var i = 0; i < moveFocusLength; i++) {
            $moveFocus.eq(i).focus();
          }
        }
      }
    }  
  });
});

 試したこと

変数iを設定して、.eq(i)で上下キーをkeyupする度にfocusを移動させるのをベースに試行錯誤した。

  1. for文で回してfocusをつけようとした。
  2. var i = 0; i++ .eq(i)でcountUpをしようとした。

 補足情報(FW/ツールのバージョンなど)

http://cly7796.net/wp/javascript/change-the-focus-with-the-arrow-keys/
https://qiita.com/jshindo/items/cd30c73989659374698a

form入力後、下キー押したgifです

参考になる記事などあれば教えていただけると幸いです。
よろしくお願いいたします。

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/11/02 18:16

    まず、静的なliではできているのでしょうか?liにfocusできるのでしょうか?

    キャンセル

  • akiiro_

    2018/11/02 18:26

    回答ありがとうございます。liは動的に生成しています。var dynamicSuggestListItemがliです。 liにfocusはできます!

    キャンセル

回答 1

checkベストアンサー

+1

liにfocusができるというところがよくわかりません。
単純なモデルでやってもfocusイベントを拾えないように見えますが・・・

<script>
$(function(){
  $('li').on('focus',function(){
    console.log("focus");
  });
});
</script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

 tabindexでのfocus

こんな感じですかね?

<script>
$(function(){
  $('#btn').on('click',function(){
    $('#u1').append($('<li>',{text:"hoge",tabindex:$('#u1 li').length+1}));
  });
  $('#u1').on('focus','li',function(){
    $(this).css({color:"red"});
  }).on('blur','li',function(){
    $(this).css({color:""});
  }).on('keydown','li',function(e){
    var idx=$('#u1 li').index(this);
    var len=$('#u1 li').length;
    if(e.keyCode == 38){
      idx--;
      if(idx<0) idx=len-1;
    }
    if(e.keyCode == 40){
      idx++;
      if(idx>=len) idx=0;
    }
    $('#u1 li').eq(idx).trigger('focus');
  });
});
</script>
<ul id="u1">
<li tabindex="1">a</li>
<li tabindex="2">b</li>
<li tabindex="3">c</li>
</ul>

<input type="button" id="btn" value="add li">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/02 18:34

    input以外の要素にfocusをあてる為にliにtabindex属性を追加してます!

    キャンセル

  • 2018/11/02 19:18

    tabindexでのフォーカスを調整してみました

    キャンセル

  • 2018/11/03 09:11

    回答ありがとうございます! 解決しました!
    原因はformのkeyupイベントでliにもfocus移動の処理しようとしてたからでした。
    その中にliのイベント指定したら上手くいきました!
    本当に助かりました!
    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る