Question

场景是-我在第1页上有一个超链接。单击链接，将打开第2页。当屏幕阅读器为桌面打开时，我希望焦点集中在第一个可聚焦元素上。而且，当为手机打开语音通话时，功能相同。

Answer 1

这是实现此目标所需的JavaScript的基本内容，您需要将其添加到函数中并在页面加载时调用它，进行调整以做出反应（不是为您编写代码，只是为您提供指导）您需要）。

var focusableItems = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', '[tabindex="0"]']; //a list of items that should be focusable.
var findString = focusableItems.join(", ");
var canFocus = Array.prototype.slice.call($('body').find(findString));

canFocus[0].focus();

说明

focusableItems是页面上可以接收焦点的每种选择器的列表。

findString是逗号分隔的选择器字符串。

canFocus是页面上可以接收使用find方法找到的焦点的项目的数组。

请注意：我使用的不是jQuery的自定义库，我敢肯定find的工作原理相同，但是您需要检查一下。

canFocus[0].focus();将页面上的第一个可聚焦项聚焦。

可以大大简化此方法，但我认为向您展示这些步骤将增进您的理解。

简化版本（未试用）

Array.prototype.slice.call($('body').find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'))[0].focus();

对于那些没有jQuery的人

我使用ki.js的自定义实现，如下所示，请在上面的代码之前添加

if (typeof $ == "undefined") {
    !function (b, c, d, e, f) {

        f = b['add' + e]

        function i(a, d, i) {
            for (d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]))
                ;
        }

        $ = function (a) {
            return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function () {
                $(a);
            }, 9) : a() : new i(a);
        };

        $[d] = i[d] = {
            on: function (a, b) {
                return this.each(function (c) {
                    f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
                })
            },
            off: function (a, b) {
                return this.each(function (c) {
                    f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
                })
            },
            each: function (a, b) {
                for (var c = this, d = 0, e = c.length; d < e; ++d) {
                    a.call(b || c[d], c[d], d, c)
                }
                return c
            },
            splice: c.splice
        }
    }(document, [], 'prototype', 'EventListener');
    var props = ['add', 'remove', 'toggle', 'has'],
            maps = ['add', 'remove', 'toggle', 'contains'];
    props.forEach(function (prop, index) {
        $.prototype[prop + 'Class'] = function (a) {
            return this.each(function (b) {
                if (a) {
                    b.classList[maps[index]](a);
                }
            });
        };
    });
    $.prototype.hasClass = function (a) {
        return this[0].classList.contains(a);
    };
}
$.prototype.find = function (selector) {
    return $(selector, this);
};

专注于基于React的应用程序中的第一个可聚焦元素

1 个答案:

说明

对于那些没有jQuery的人