满足嵌套跨度。谁有重点？ [英] contenteditable with nested span. Who has the focus?

问题描述

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

我只对最近的符合HTML5的浏览器（在GNU / Linux上）感兴趣。火狐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也是这样;我目前正在生成在服务器端的一些JavaScript构建的DOM;当然，我可以改变发电机！）}

我点击，使焦点之间的两个 OO 。如何获得 foo_cl 的DOM元素，最好是使用Jquery。

在 AR 。我想要 bar_cl span。

当然， $（'：focus'） 不起作用。它给出 div

FWIW，它是提交 2015）增补此问题。也许 contenteditable 对我没有用处，但 tabindex 肯定是有用的！

TS / html401 / cp0101 / 0101-TABINDEX.htmlrel =nofollow> tabindex属性。

在你的示例中， p>

 < div id ='myeditdiv'contenteditable ='true'> 
 < / div> 
  

注意： 负 tabindex 使元素可以被关注但是不能被设置为tabbable，因为使用tabbing方法将从 0 开始使用绝对值（ spec ）。

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

  $ （'[contenteditable]'）。on（'focus'，'*'，function（e）{
 e.stopPropagation（）; 
 console.log（this）; 
}） ; 
  

：focusable 伪选择。如果您希望动态设置 tabindex 属性为不可聚焦的元素，您可以使用：

  $（'[contenteditable]'）。find（'：not（：focusable）'）。attr（'tabindex'，-1）; 
  

如果你不想包含jQuery UI来得到：你可以创建自己的自定义选择器：

  //如果还没有包含IIFE包括jQuery UI 
（function（）{
 function focusable（element，isTabIndexNotNaN）{
 var map，mapName，img，$ b $ 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 +'] ）; 
 return; img&& $（img）.is（'：visible'）; 
} 
 return（/ ^（input | select | textarea |按钮|对象）$ /。test（nodeName）？ ！element.disabled：
a=== nodeName？ element.href || isTabIndexNotNaN：isTabIndexNotNaN）&& 
 //元素及其所有祖先必须是可见的
 $（element）.is（'：visible'）; 
 
 $ .extend（$。expr [：]，{
 focusable：function（element）{
 return focusable（element，！isNaN（$。attr元素，tabindex）））; 
} 
}）; 
}）（）; 
  

- jsFiddle-

This question (to which I added a bounty) is related and gives the context and motivations (my GPLv3 MELT monitor on github; I added at last some README to it).

I am only interested in recent HTML5 compliant browsers (on GNU/Linux), e.g. Firefox 38 at least (and preferably 42) or Chrome 46 (on Debian/Sid desktop, x86-64)

So, suppose I have in my HTML5 page

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

^{(actually the HTML is generated, and so is the DOM; I'm currently generating on the server side some javascript which constructs the DOM; of course I can change the generators!)}

And I am clicking so that the focus come between the two OO. How can I get the DOM element of foo_cl, preferably with Jquery.

Same question when focusing between ar. I want the bar_cl span.

Of course, $(':focus') don't work. It gives the div

FWIW, it is commit 9109ae5b3d168f1 of the MELT monitor.

PS. See my (november 26^th 2015) addenda to this question. Probably contenteditable is not useful to me, but tabindex surely is useful!

解决方案

To make any element focusable, not only interactive content ones, you have to set tabindex attribute.

In your sample, it would be:

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

Note: negative tabindex makes element focusable but not tabbable because using tabbing method would start at 0 using absolute value (spec).

Now in jQuery, you could delegate focus event to these elements:

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

-jsFiddle-

As a side note, jQuery UI has a :focusable pseudo selector. If you wish to dynamically set tabindex attribute to not focusable elements, you could use:

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

-jsFiddle (including jQuery UI)-

If you don't want to include jQuery UI just to get :focusable pseudo selector, you can create your own custom selector:

//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-

这篇关于满足嵌套跨度。谁有重点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！