前提・実現したいこと
動的に生成したliに当てたfocusを上下キーで移動させたい。
suggestを作成しています。
form内でkeyupされるとformの下にsuggestが表示されます。
liの中身はajaxで引っ張ってきてます。
発生している問題・エラーメッセージ
liにfocusは当たるがfocusの移動ができない。
該当のソースコード
HTML
1<input type="text" class="profile-edit-add-tag-myself-search js-profile-edit-add-skill-tag-myself-search"> 2<ul class="profile-edit-suggest-list js-profile-edit-skill-suggest-list"></ul>
JavaScript
1$(function () { 2 var $addMyselfSkillTagSearch = $('.js-profile-edit-add-skill-tag-myself-search'); 3 var $suggestSkillList = $('.js-profile-edit-skill-suggest-list'); 4 5 $addMyselfSkillTagSearch.on('keyup', function (e) { 6 if (!(eKeyCode === 38 || eKeyCode === 40)) { 7 $.ajax({ 8 //...省略... 9 }) 10 .then(function (data) { 11 for (var item in data) { 12 var dynamicSuggestListItem = $('<li class="profile-edit-suggest-list-item js-profile-edit-suggest-list-item js-move-focus" tabindex="-1">' + data[item] + '</li>'); 13 14 $suggestSkillList.append(dynamicSuggestListItem); 15 } 16 }); 17 } else { 18 var $moveFocus = $('.js-move-focus'); 19 var moveFocusLength = $moveFocus.length; 20 var moveFocusActive = $moveFocus.is(':focus'); 21 22 if (e.keyCode === 38) { 23 // ここに上キーの処理 24 } 25 26 if (e.keyCode === 40) { 27 // ここに下キーの処理1 28 if (!moveFocusActive) { 29 $moveFocus.eq(0).focus(); 30 } else { 31 for (var i = 0; i < moveFocusLength; i++) { 32 $moveFocus.eq(i).focus(); 33 } 34 } 35 } 36 } 37 }); 38}); 39
試したこと
変数iを設定して、.eq(i)で上下キーをkeyupする度にfocusを移動させるのをベースに試行錯誤した。
- for文で回してfocusをつけようとした。
- 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
参考になる記事などあれば教えていただけると幸いです。
よろしくお願いいたします。
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー