javascript - contenteditable 嵌套跨度。谁有重点?

标签 javascript jquery linux html firefox

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);
});

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

关于javascript - contenteditable 嵌套跨度。谁有重点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33897603/

相关文章:

Linux AT&T 命令行参数

javascript - Jquery .text() 调用返回 null?

javascript - 本地托管时日期选择器不起作用

java文件排序在windows和linux中的区别

javascript - ReactJs 复选框 - 无法取消选中

javascript - 悬停时停止 jQuery 加载

linux - 将静态库转换为动态库

javascript - 当流管道用于缓冲时, Node 回显服务器性能下降 10 倍

javascript - Angular e2e 描述的排序和它的阻塞

javascript - 目前是否有将两个或多个字符串文字类型连接到 TypeScript 中的单个字符串文字类型的方法?