Question

我创建了一个访问密钥Angular指令。

angular.module('tcne.common').directive("accessKey", function () {
    return {
        restrict: "A",
        scope: {
        },
        link: function (scope, element, attrs) {
            var $element = $(element);
            $element.attr("accesskey", attrs.accessKey);
            var content = $element.html();
            for (var i = 0; i < content.length; i++) {
                var char = content[i];
                if (char.toLowerCase() === attrs.accessKey.toLowerCase()) {
                    content = content.substr(0, i) + "<u>" + char + "</u>" + content.substr(i + 1);
                    break;
                }
            }
            $element.html(content);
        },
        replace: false
    };
});

它强调按钮Label中的访问键，并将访问键属性添加到元素中。我可以以某种方式阻止accesskey设置焦点按钮吗？它杀死了键盘捷径的目的

编辑：滚动我自己的控制键

angular.module('tcne.common').directive('accessKey', ['$compile', '$interval', function ($compile, $interval) {
    var modifierPressed = false;
    $("body").keyup(function (e) {
        if (modifierPressed && !e.altKey) {
            modifierPressed = false;
            digestScopes();
        }
    });

    $("body").keydown(function (e) {
        modifierPressed = e.altKey;
        if (modifierPressed && scopes.hasOwnProperty(String.fromCharCode(e.which).toLowerCase())) {
            var scope = scopes[String.fromCharCode(e.which).toLowerCase()];
            scope.handle();
            return;
        }

        if (modifierPressed) {
            e.preventDefault();
            digestScopes();
        }
    });

    function digestScopes() {
        for (var index in scopes) {
            if (scopes.hasOwnProperty(index)) {
                var scope = scopes[index]
                scope.$digest();
            }
        }
    }

    function isModifierPressed() {
        return modifierPressed;
    }

    var scopes = {};

    return {
        restrict: 'A',
        scope: {
        },
        link: function (scope, element, attrs) {
            var key = attrs.accessKey.toLowerCase();

            var content = element.html();
            var char;
            for (var i = 0; i < content.length; i++) {
                char = content[i];
                if (char.toLowerCase() === key) {
                    content = content.substr(0, i) + '<u><strong ng-if="highlight()">{{char}}</strong><span ng-if="!highlight()">{{char}}</span></u>' + content.substr(i + 1);
                    break;
                }
            }
            element.html(content);

            var underscoreScope = scope.$new();
            underscoreScope.char = char;
            underscoreScope.highlight = isModifierPressed;
            underscoreScope.handle = element.click.bind(element);
            scopes[key] = underscoreScope;
            scope.$on('$destroy', function () {
                delete scopes[key];
            });


            $compile(element.find("u"))(underscoreScope);
        },
        replace: false
    };
}]);

当按下alt键时，它还会突出显示访问键按钮，这很好任何坑都落在这个代码？感谢

发现陷阱，element.html然后$compile将破坏已编译元素内的任何指令。所以我改为

var captionElement = element.contents().first(":text");
var content = captionElement.text();

然后我添加自定义内容，如

var view = $("<span>").html(content);
captionElement.replaceWith(view);
$compile(view)(vm);

如果这被认为是不好的做法，请告诉我

禁用该acceess键将焦点设置为按钮

0 个答案: