web-dev-qa-db-ja.com

下矢印キーを押してリストアイテムにフォーカス

矢印キーを押してliアイテムに移動する必要があるカスタムの自動提案ボックスを作成しています。

だから私はそれがフォーカスを得ているliにtabindex属性を追加しました。しかし問題は、ランダムな高さでdivを上にスクロールして、divから選択したliを外に出すことです。

enter image description here

下矢印キーの後：

enter image description here

そして矢印キーを押した後：

enter image description here

その後、マウスダウンが完全に動作する間、画面から消えます。

ここで私は Demo JSFiddle を最初にクリックしましたitem1をクリックしてから、同じように動作する矢印を押します。

javascriptjqueryfocushtml-lists
15
Zaheer Ahmed

コメントの詳細

コンテナのscrollTopをindex of focused li * li heightに設定します。

return falseキーダウン時に、オーバーフローした親の通常のブラウザスクロールを防止します。

$('div.container').on('focus', 'li', function() {
    var $this = $(this);
    $this.addClass('active').siblings().removeClass();
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    var $this = $(this);
    if (e.keyCode === 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode === 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();

jsfiddle http://jsfiddle.net/38zR3/42/

16
David Fregoli

Tabindexの代わりにアンカーを使用してみましたか？例えば

<li><a href="#"></li>

私の経験では、一部のブラウザはtabindexへのフォーカスを正しく処理できません

2
CevenNome

私は一度そのような問題を抱えていて、それを含むdivのCSSスタイルoverflowをnoneまたはhiddenに設定に応じて設定することで解決しました。

1
Cy Pangilinan

.scrollTop() を追加して、中央に配置するか、希望どおりに配置するかを確認します。

0
Mihai Stancu