Question

这个question（我添加了一个赏金）是相关的，并给出了上下文和动机（我在Github上的GPLv3 MELT monitor;我最后添加了一些自述文件）。

我只对最近的 HTML5兼容浏览器（在GNU / Linux上）感兴趣，例如Firefox 38至少（最好是42）或Chrome 46（在Debian / Sid桌面上，x86-64）

所以，假设我在HTML5页面中

<div id='myeditdiv' contenteditable='true'>
  <span class='foo_cl'>FOO<span class='bar_cl'>bar</span></span>
</div>

^{（实际上HTML是生成的，DOM也是如此;我目前正在服务器端生成一些构建DOM的javascript;当然我可以更改生成器！）}

我正在点击，以便焦点介于两个OO之间。如何获取foo_cl的DOM元素，最好使用Jquery。

在ar之间聚焦时的同样问题。我想要bar_cl范围。

当然，$(':focus')不起作用。它给出了div

FWIW，它是MELT监视器的提交9109ae5b3d168f1。

PS。见我{2015年11月26日^th）附录this question。可能contenteditable对我没用，但tabindex肯定有用！

Answer 1

要使任何元素都具有焦点，而不仅仅是交互式内容，您必须设置tabindex attribute。

在您的样本中，它将是：

<div id='myeditdiv' contenteditable='true'>
  <span class='foo_cl' tabindex="-1">FOO<span class='bar_cl' tabindex="-1">bar</span</span>
</div>

注意： 否定tabindex会使元素具有焦点但不可标记，因为使用Tab键方法将从0开始使用绝对值（spec）。

现在在jQuery中，您可以将focus事件委托给这些元素：

$('[contenteditable]').on('focus', '*', function(e){
    e.stopPropagation();
    console.log(this);
});

-jsFiddle-

作为旁注，jQuery UI有一个:focusable伪选择器。如果您希望将tabindex属性动态设置为不可聚焦的元素，可以使用：

$('[contenteditable]').find(':not(:focusable)').attr('tabindex', -1);

-jsFiddle (including jQuery UI)-

如果您不想仅仅为获取:focusable伪选择器而添加jQuery UI，则可以创建自己的自定义选择器：

//include IIFE if not already including jQuery UI
(function () {
    function focusable(element, isTabIndexNotNaN) {
        var map, mapName, img,
        nodeName = element.nodeName.toLowerCase();
        if ("area" === nodeName) {
            map = element.parentNode;
            mapName = map.name;
            if (!element.href || !mapName || map.nodeName.toLowerCase() !== "map") {
                return false;
            }
            img = $("img[usemap='#" + mapName + "']")[0];
            return !!img && $(img).is(':visible');
        }
        return (/^(input|select|textarea|button|object)$/.test(nodeName) ? !element.disabled :
            "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) &&
        // the element and all of its ancestors must be visible
        $(element).is(':visible');
    }
    $.extend($.expr[":"], {
        focusable: function (element) {
            return focusable(element, !isNaN($.attr(element, "tabindex")));
        }
    });
})();

-jsFiddle-

满足嵌套范围。谁有焦点？

1 个答案: