Question

我试图让网页像键盘一样易于使用键盘，并且需要能够在控件接收并失去焦点时做出响应。我已经构建了一个小plunk来说明这一点。我已经使用了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;
    });
}
]);

非常感谢

Answer 1

请参见此处：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>

将焦点事件捕获到角度

1 个答案: