javascript - On keydown trigger next tab index (focus next element) - Stack Overflow

I am having a bootstrap's dropdown menu (I implemented only styles without Javascript)... hence I need to port to angular2 some js functionality.

One is keyboard accessibility.

So far I have:

<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>

In my controller I have this:

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

What I would like is that on arrow down it simulates or triggers the TAB key (so it should focus next element) and on arrow key up to simulate the SHIFT-TAB key (previous tabindex)

I have the event.srcElement and have nextSiblingproperty but it doesn't have the method focus... so cannot do event.srcElement.nextSibling.focus();.

What would be the best solution here?

I am having a bootstrap's dropdown menu (I implemented only styles without Javascript)... hence I need to port to angular2 some js functionality.

One is keyboard accessibility.

So far I have:

<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>

In my controller I have this:

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

What I would like is that on arrow down it simulates or triggers the TAB key (so it should focus next element) and on arrow key up to simulate the SHIFT-TAB key (previous tabindex)

I have the event.srcElement and have nextSiblingproperty but it doesn't have the method focus... so cannot do event.srcElement.nextSibling.focus();.

What would be the best solution here?

• javascript
• angular
• dom-events

Share Improve this question Follow edited Aug 21, 2019 at 21:21 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 15, 2016 at 11:49 Demiro-FE-ArchitectDemiro-FE-Architect 3,7401414 gold badges5555 silver badges8888 bronze badges 7

• how do you switch between tabs? adding/removing a css class? – Supamiu Commented Sep 15, 2016 at 12:01
• not a tab... its a drop down menu... and you can check here: getbootstrap./javascript/#dropdowns ... click on one to open and then navigate with the tab key – Demiro-FE-Architect Commented Sep 15, 2016 at 22:00
• I think that the best way would be to add bootstrap's javascript too in your index.html file. This way you don't have to worry about how to make it work in angular2, since bootstrap will already make it work. – Supamiu Commented Sep 16, 2016 at 7:52
• yeah... sure.. why didn't I thought of that before.... the whole point is to stay clear of jquery and cumbersome js... angular does things just find, just need to figure the way... hope this is not your solution for everything... just include more/everything ... – Demiro-FE-Architect Commented Sep 16, 2016 at 8:28
• 1 So I think the best way to do it would be to use an angular2 dropdown and add bootstrap style on it. you can even get a bootstrap dropdown made with angular2 on npm: npmjs./package/ng2-dropdown You can even see the source code on github if you want to copy the behaviour on your ponent. – Supamiu Commented Sep 16, 2016 at 9:06

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 1

so, for the reference, there is obviously a distinction between Element and HTMLElement, the later is extended one.

Angular2 has a ElementRef you usually use when referencing an HTML element...

so to get a HTMLElement from event.nextSibling you do

let next = new ElementRef(event.nextSibling);

and the using

next.nativeElement.focus();

don't forget to include ElementRef in your imports

import { Component, ElementRef } from '@angular/core';