2016-09-15 7 views
0

ので、私は(私はjavascriptをせずにスタイルのみを実装)、ブートストラップのドロップダウンメニューを持っています...ので、私はいくつかのJSの機能Angular2:KeyDownイベントトリガー上の次のタブインデックス(次の要素にフォーカス)

をangular2するポートに必要

onMenuKeydown(event: KeyboardEvent){ 
    if(event.keyCode === 40){ 
     /*event.srcElement.nextSibling.*/ 
     event.preventDefault(); 
    } 
} 
:1は、これまでのところ、私は私のコントローラで

<div (keydown)="onMenuKeydown($event)" ....> 
    <ul class="dropdown-menu"> 
     <li><a href="#"...>option 1</a></li> 
     <li><a href="#"...>option 2</a></li> 
     <li><a href="#"...>option 3</a></li> 
    </ul> 
</div> 

を持って、私はこれを持っているキーボードのアクセシビリティ

です

Shiftキーを押しながらTabキー(前のタブインデックス)をシミュレートするために、Tabキーをシミュレートまたはトリガーします(次の要素にフォーカスする必要があります)。 .srcElementとnextSiblingプロパティを持っていますが、フォーカスメソッドはありません。だから、できませんevent.srcElement.nextSibling.focus();

ここで最善の解決策は何ですか?

+0

どのようにタブを切り替えるのですか? cssクラスを追加/削除しますか? – Supamiu

+0

タブではない...そのドロップダウンメニュー...ここで確認できます:http://getbootstrap.com/javascript/#dropdowns ...タブをクリックすると開きます。 –

+0

Iあなたのindex.htmlファイルにもブートストラップのjavascriptを追加するのが最善の方法だと思います。この方法で、angle2で動作させる方法を心配する必要はありません。ブートストラップはすでに動作させるためです。 – Supamiu

答えて

1

ので、参考のため、要素のHTMLElement区別は後は、一つの拡張され、明らかに存在します。

Angular2は、HTML要素を参照するときは、通常、あなたが

let next = new ElementRef(event.nextSibling); 

next.nativeElement.focus(); 
を使用して操作を行うevent.nextSiblingからのHTMLElementを取得するには...

を使用ElementRefを持っています

インポートにElementRefを含めることを忘れないでください。

+0

それは動作しているかどうか? –

関連する問題