javascriptangularjsonfocuslostfocus

Trapping focus events in angular

I am trying to have the web page as easy to use with the keyboard as with the mouse and need to be able to respond when a control receives and loses the focus. I've built a small plunk to illustrate this. I've used the event names from jquery as the documentation seemed to say that was the appropriate thing to do.

Tabbing through the screen to each button should show text saying which button has focus.

Here's the html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body data-ng-controller="bbbb">
    <input id="b1" type="button" value="button1">
    <input id="b2" type="button" value="button2">
    <input id="b3" type="button" value="button3">

    <h2 ng-show="showb1">Button1 has focus</h2>
    <h2 ng-show="showb2">Button2 has focus</h2>
    <h2 ng-show="showb3">Button3 has focus</h2>
</body>
</html>

and the js

var app = angular.module('app', []);

var controllerId = 'bbbb';
app.controller('bbbb', ['$scope', function ($scope) {
    $scope.showb1 = false;
    $scope.showb2 = false;
    $scope.showb3 = false;

    var b1 = angular.element('#b1');
    b1.on('focusin', function (event) {
        $scope.showb1 = true;
    });
    b1.on('focusout', function (event) {
        $scope.showb1 = false;
    });

    var b2 = angular.element('#b2');
    b2.on('focusin', function (event) {
        $scope.showb2 = true;
    });
    b2.on('focusout', function (event) {
        $scope.showb2 = false;
    });

    var b3 = angular.element('#b3');
    b3.on('focusin', function (event) {
        $scope.showb3 = true;
    });
    b3.on('focusout', function (event) {
        $scope.showb3 = false;
    });
}
]);

Help greatly appreciated

Solution

  • Please see here: http://plnkr.co/edit/zOk0CJv0IdMb3GzvLxT5?p=preview

    <!DOCTYPE html>
    <html ng-app="app">
    <head>
        <title>Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body data-ng-controller="bbbb">
        <input id="b1" type="button" value="button1" ng-focus="showb1 =true" ng-blur="showb1 =false">
        <input id="b2" type="button" value="button2" ng-focus="showb2= true" ng-blur="showb2 =false">
        <input id="b3" type="button" value="button3" ng-focus="showb3= true" ng-blur="showb3 =false">

        <h2 ng-show="showb1">Button1 has focus</h2>
        <h2 ng-show="showb2">Button2 has focus</h2>
        <h2 ng-show="showb3">Button3 has focus</h2>
    </body>
    </html>