这question (我向其添加了赏金)相关并给出了背景和动机(我的 GPLv3 MELT monitor 在 github 上;我最后添加了一些自述文件)。
我只对 最近 兼容 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,它是提交 9109ae5b3d168f1 MELT 监测器。
附言。请参阅我(2015 年 11 月 26 日th)对 this question 的附录.可能 contenteditable
对我没用,但 tabindex
肯定有用!
最佳答案
要使任何元素可聚焦,不仅是交互式内容元素,您必须设置 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
使元素可聚焦但不可制表,因为使用制表方法将从 0
使用绝对值 ( spec )。
现在在 jQuery 中,您可以将 focus
事件委托(delegate)给这些元素:
$('[contenteditable]').on('focus', '*', function(e){
e.stopPropagation();
console.log(this);
});
作为旁注,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")));
}
});
})();
关于javascript - contenteditable 嵌套跨度。谁有重点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33897603/