IE8 中的 filter 和 queryselectorall 问题答案

【问题标题】：Issue with filter and queryselectorall in IE8IE8 中的 filter 和 queryselectorall 问题
【发布时间】：2018-01-09 14:10:13
【问题描述】：

我有一个要求，我应该在页面中获取活动元素并根据这些元素执行操作。该方法应该适用于 ie8 和 ie11。下面是适用于 IE11 但不适用于 IE8 的代码。我知道下面代码中使用的 filter 或 queryselectorall 导致了问题。有人可以帮我解决这个问题。

    function focusNextElement(keyCode) {
        var focussableElements = 'select:not([disabled]), button:not([disabled]),input[type=radio]:not([disabled]),input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
        if (document.activeElement && document.activeElement.form) {

            var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
    function (element) {
        return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement 
    });
            var index = focussable.indexOf(document.activeElement);            
            if (index > -1) {
                alert('indide');
                var nextElement = focussable[index + 1] || focussable[0];
                nextElement.focus();
            }
        }
        event.preventDefault();
        return false;
    }

    if (document.addEventListener !== undefined)
    {
            document.addEventListener('keydown', function (event) {
            if (event.keyCode == 9) {
                if (event.target.nodeName === 'INPUT') {
                    focusNextElement(event.keyCode);
                }
            }
        });
    }
    else
    {
        document.attachEvent('onkeydown', function (event) {
            if (event.keyCode == 9) {
                if (event.srcElement.tagName === 'INPUT') {
                    focusNextElement(event.keyCode);
                }
            }
        });
    }

【问题讨论】：

您没有描述问题所在。 “它不起作用”不是描述性的。
Polyfill here: developer.mozilla.org/de/docs/Web/JavaScript/Reference/… and here: gist.github.com/chrisjlee/8960575 - 不到一分钟到谷歌
所以要么去寻找在 IE 8 中也提供所需功能的 polyfill，或者相应地重写代码，以便它只使用 IE 8 中已经可用的方法...
querySelectorAll 应该已经在 IE 8 中工作，如果您处于标准模式 - stackoverflow.com/a/16920451/1427878
当页面在 IE8 中呈现时，上面的代码不起作用（我不应该将页面模拟到 IE11）。 javascript 错误是元素未定义。我的代码有什么问题？

标签： javascript

【解决方案1】：

我需要获取页面中所有的活动元素，并需要根据返回的值进行一些操作。

当页面在 IE11 中呈现但在 IE8 中不呈现时，以下代码可以工作。有人可以帮助我修复代码，以便它也可以在 IE8 中运行。

var focussableElements = 'select:not([disabled]), button:not([disabled]),input[type=radio]:not([disabled]),input[type=text]:not([disabled ]), [tabindex]:not([disabled]):not([tabindex="-1"])';

    if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
function (element) {
    return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement 
});
        var index = focussable.indexOf(document.activeElement);

【讨论】：