CODEWITHSUNDEEP
htmlangularjs
YASHWANTH LAKKAKULA
YASHWANTH LAKKAKULA

Reputation: 49

Tab Key is not capturing ng-click

Am new to Angularjs,Am using a ng-click option,but when i press a tab key in the keyboard ,ng-click is not capturing.Tab key is capturing only Href,how to enable Tab key to capture ng-click.

<th><a href="#/providerSearch" class="nameCross"><img src="img/cross.png" ng-click="goBack()"></a>{{firstName}} {{lastName}}</th>
                    <th>{{licNum}}</th>
                    <th>{{city}}</th>
                    <th>{{stCode}}</th>
                    <th>In Network</th>
                    <th>{{specialty}}</th>
                    <th>{{phone}}</th>
                    <th>{{tin}}</th>
                    <th class="smallWidth noteIcon" ng-click="fetchPrvdNts()" ><div ng-show="count>0" class="countBuble">{{count}}</div></th>
                    <th class="smallWidth moreDetails" ng-click="showMoreDtls()" ng-class="{open:!showDetailsBlock , close:showDetailsBlock}">More</th>

pressing on Tab key its focusing on first href line,but after pressing tab key there its not capturing the ng-click functionality for{{count}}.Can anyone help me with it

Upvotes: 3

Views: 2427

Answers (1)

dfsq
dfsq

Reputation: 193261

Use tabindex attribute to control what element gain focus on Tab key press. However if your goal is to allow use to navigate to clickable element with tab and then be able to trigger action with Enter or something like this, you will need to make controller listen keyboard event also, as well as click. You can do something like this:

HTML:

<a href="#" tabindex="1">Link</a>
<span ng-keypress="test($event)" ng-click="test()" tabindex="2">Test</span>

Controller:

$scope.test = function(e) {
    if ((e && e.keyCode === 13) || typeof e === 'undefined') {
        alert('test');
    }
};

Can it be done simpler?

Demo experiment: http://plnkr.co/edit/ZUv2V1uy7ov6ix4JEQdp?p=preview

Upvotes: 2

Related Questions