set focus on span on tab using angular js

Question

I have below structure for my span tag,

    <a href="#"> </a>
    <span  class="spanclass" ng-click="clickfunction()">

    </span>

It is said that we need to add tabindex=-1 to the span
and then set focus to the span element.

Initially I thought like on ng-blur of anchor tag, I can call a function where I can set the focus as below

    $('.spanclass').attr("tabIndex", -1).focus();

Then Im able to get focus on it however, when I press enter ng-click is not getting called, which is happening if I do by clicking directly.Also here I mixed both angular js and jquery which might not be correct.

May I know how we can implement above two steps using angular js and on what event.

Thanks, Balaji

you can use UI-keypress for ref check http://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — rjdmello, Jul 24 '15 at 12:21
@rjdmello thanks for the link, but my issue is like I cant use blur event on anchor tag for setting tab-index for the span, may I know on what event I can set the tabindex for the span to -1, thanks — balaji, Jul 24 '15 at 12:26

score 1 · Answer 1 · answered Jul 24 '15 at 12:31

It will be more semantic to change the span to a button (you can still style it as you wish)

    ...
    <style>
        .span {
            border: none;
            background: none;
        }
    </style>
</head>
<body ng-app="app">
    <div ng-controller="ctrlr">
        <a href="#" tabindex="2">First</a>
        <button class="span" ng-click="clickfunction()" tabindex="1">
            Second
        </button>
    </div>

    <script>
        angular.module('app', []);
        angular.module('app').controller('ctrlr', function ($scope) {
            $scope.clickfunction = function () {
                alert('a')
            }
        });
    </script>
</body>

        angular.module('app', []);
        angular.module('app').controller('ctrlr', function ($scope) {
            $scope.clickfunction = function () {
                alert('a')
            }
        });

        .span {
            border: none;
            background: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
    <div ng-controller="ctrlr">
        <a href="#" tabindex="2">First</a>
        <button class="span" ng-click="clickfunction()" tabindex="1">
            Second
        </button>
    </div>
</div>

Hi, thanks for your answer, Im not supposed to change from span to button , is there any other alternative — balaji, Jul 24 '15 at 12:33
@potatopeelings is correct, `span`s should only be used with inline elements, not something that you normally interact with. Can you change the `span` into an `a` tag? — Jim Buck, Jul 24 '15 at 12:38
That's sad, but yeah it's possible - you need to handle the keydown event for the span. See http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/ > Button 3. the right way to do it would be to make a directive. — potatopeelings, Jul 24 '15 at 12:38

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

As mentioned in other answers, changing to a button would make the most sense.

If you MUST use a span element, then you can add a directive to perform a function on Enter keypress, like found here: How to use a keypress event in AngularJS?

Javascript:

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

HTML:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

edited May 23 '17 at 11:59

Community

1
1

answered Jul 24 '15 at 12:59

mofojed

1,342
9
11

Also, mixing JQuery and AngularJS is perfectly fine, as long as you include JQuery first. https://docs.angularjs.org/api/ng/function/angular.element – mofojed Jul 24 '15 at 13:01
Thanks mofojed I will try this and let you know – balaji Jul 24 '15 at 14:27

score 1 · Answer 3 · answered Mar 01 '16 at 03:36

Although the above answer by @mofojed has been accepted. But here are some more clarification that will make this post complete.

You can set focus on a focusable HTML element which includes anchor tags, HTML inputs, selects, text areas, buttons, any embedded elements as well as any element with a tabindex

Note that tabindex should not be -1 if you want to focus on the span by adding a tabindex. Make the tabindex a positive number.

set focus on span on tab using angular js

3 Answers3