0

マウスと同じようにキーボードでも Web ページを使いやすくしようとしており、コントロールがフォーカスを受け取って失ったときに応答できるようにする必要があります。これを説明するために小さなプランクを作成しました。ドキュメントには、それが適切なことであると書かれているように見えたので、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 に答える