如何将焦点设置在内容可编辑 HTML 元素的子元素上答案

【问题标题】：How to set focus on child of content editable HTML element如何将焦点设置在内容可编辑 HTML 元素的子元素上
【发布时间】：2014-08-19 16:42:04
【问题描述】：

我一直在尝试创建一个高级文本输入，用户可以在其中编写主题标签。输入是一个内容可编辑设置为 true 的 div，主题标签应该是子节点，因为我允许用户在主题标签内放置空间。

我的问题是，在某些浏览器上，当用户键入时，我无法将焦点设置在主题标签的子节点上。在 Chrome/Linux 和 Safari/OSX 上似乎运行良好，但在 Firefox 和 Chrome/OSX 上设置焦点似乎不起作用。（我还没到 Windows。）

var $elComposer = $('#composer');

var InsertTagPair = function (tagtype) {
    var newTag = document.createElement (tagtype);
    $(newTag).attr ('contenteditable', 'true');
    $(newTag).attr ('class', 'tag');
    $elComposer.off ('keypress');
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.getRangeAt && selection.rangeCount) {
            var range = selection.getRangeAt (0);
            range.deleteContents ();
            range.insertNode (newTag);
            range.selectNodeContents (newTag);
            range.collapse (false);
            selection.removeAllRanges ();
            selection.addRange (range);
        };
    };
    newTag.focus ();
    return newTag;
};

var ComposerOnKeyPressed = function (event) {
    if (event.charCode == 35) { // #
        var contextTag = InsertTagPair ('span');
        $elComposer.attr ('contenteditable', 'false');
        return false;
    };
    return event;
};
$elComposer.on ('keypress', ComposerOnKeyPressed);

上面的代码是不起作用的基本部分。在这里查看它的实际效果：

JSFiddle - http://jsfiddle.net/cja963ym/1/

要查看更完整、更有意义的作曲家版本，请参阅以下内容：

JSFiddle - http://jsfiddle.net/g_borgulya/ur6zk32s/15/

症状：在 Firefox 上，如果您输入可编辑的 div 并按“#”，您必须手动单击它或使用 tab 移动焦点才能编辑主题标签，而在其他平台上它会获得焦点当我在元素上调用 newTag.focus() 时。

我不知道如何继续，甚至不知道如何调试这个问题。

【问题讨论】：

标签： javascript jquery html firefox

【解决方案1】：

在“#”处理程序中添加 newTag.focus() 使其在 Chrome 和 Firefox (Win) 中工作（以前没有，但在 IE11 上可以，只是想让您知道）

小提琴叉：http://jsfiddle.net/ekxo4ra3/

这看起来符合您的要求吗？

【讨论】：

谢谢，非常完美。虽然我不明白如果另一个不是，你的解决方案为什么/如何工作。在我看来，只有在父 contenteditable 设置为 false 后，您才能更改焦点。这在某种程度上有意义吗？
根据我的测试，使容器不再是contenteditable 只会使子元素失去焦点...至少在某些浏览器中。无论如何，这可能解释了为什么在之前设置焦点会使其无用，因为它会在之后立即被移除。
很高兴知道这一点。我花了几个小时来解决这个问题。谢谢！