Question

我一直在尝试创建一个高级文本输入，用户可以在其中编写主题标签。输入是一个具有contenteditable set true的div，并且hashtags应该是子节点，因为我允许用户在hashtags中放置空格。

我的问题是，在某些浏览器上，我无法将焦点设置为用户键入的hashtag的子节点。在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并按＆＃39;＃＆＃39;，您需要通过鼠标手动点击它或使用标签移动焦点以便能够编辑主题标签，同时在当我在元素上调用newTag.focus()时，它会成为焦点。

我不知道如何继续前进，甚至不知道如何调试此问题。

Answer 1

在＆＃34;＃＆＃34;中添加newTag.focus()处理程序使它在Chrome和Firefox（Win）中运行（它之前没有，但在IE11上做过，只是想让你知道）

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

这看起来对你想要的东西好吗？

如何将焦点放在内容可编辑HTML元素的子节点上

1 个答案: