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

时间:2015-11-11 08:20:43

标签: javascript html angularjs

我创建了一个访问密钥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);

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

0 个答案:

没有答案