CODEWITHSUNDEEP
javascripthtmlangularjs
balaji
balaji

Reputation: 794

set focus on span on tab using angular js

I have below structure for my span tag, 

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

    </span>

  1. It is said that we need to add tabindex=-1 to the span

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

Upvotes: 0

Views: 5163

Answers (3)

akhouri
akhouri

Reputation: 3165

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.

Upvotes: 1

mofojed
mofojed

Reputation: 1393

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>

Upvotes: 1

potatopeelings
potatopeelings

Reputation: 41065

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>

Upvotes: 1

Related Questions