0

我试图让网页与键盘一样易于使用鼠标，并且需要能够在控件接收和失去焦点时做出响应。我已经建立了一个小笨蛋来说明这一点。我使用了 jquery 中的事件名称，因为文档似乎说这是合适的做法。

在屏幕上切换到每个按钮应显示说明哪个按钮具有焦点的文本。

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

和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;
    });
}
]);

非常感谢帮助

4

1 回答 1

2

请看这里：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>
于 2014-07-23T09:36:43.273 回答