с контентоспособным контентом. У кого есть фокус?

Question

Этот question (к которому я добавил щедрость) связан и дает контекст и мотивы (мой GPLv3 MELT monitor на github, я добавил, наконец, README).

Меня интересует только HTML-совместимые браузеры (на 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;! Конечно, я могу изменить генераторы)}

и я щелкая так, что фокус проходит между двумя OO , Как я могу получить элемент DOM из foo_cl, желательно с JQuery.

Тот же вопрос при фокусировке между ar. Я хочу диапазон bar_cl.

Конечно, $(':focus') не работает. Он дает div

FWIW, это фиксация 9109ae5b3d168f1 монитора MELT.

PS. См. Мой (ноябрь 26 ^-й 2015) добавления к 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 делает элемент фокусируемый но не tabbable, потому что с помощью метода табулируя бы начать в 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)-

Если вы не хотите, чтобы включить JQuery UI просто получить :focusable селектор псевдо, вы можете создать свой собственный пользовательский селектор:

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