javascript – 在内容可编辑的div中设置光标位置

摘要：

我试图实现这样的效果：当用户键入a(或[在内容可编辑的div中,第二个]或]时自动插入,并且插入符号位于两者之间,即(和)之间.

FIDDLE

键入–s的右侧,并查看它在第一行中的工作方式,而在第二行中不起作用.

我的努力：

我正在使用此代码(通过Tim Down)来突出显示文本的某些部分并设置光标位置.前者有效,但后者没有:(

function getTextNodesIn(node) { // helper
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0,len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes,getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function highlightText(el,start,end) { // main
    if (el.tagName === "DIV") { // content-editable div
        var range = document.createrange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0,endCharCount;

        for (var i = 0,textNode; textNode = textNodes[i++];) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
                range.setStart(textNode,start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode,end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else { // textarea
        el.selectionStart = start;
        el.selectionEnd = end;
    }
}

笔记：

>< div>将有子元素(主要是< br> s).
>使用vanilla JS只需要Chrome支持

我的问题：

>为什么上述功能不起作用？
>如何才能成功？

我花了几个小时搜索这个并没有发现任何有用的东西.有些是关于设置儿童div的开始或结束,但对我来说,它可以是任何位置,任何地方.

更新：

感谢大家终于finished development了！

解决方法

这是一个更简单的方法.有几点需要注意：

> keypress是唯一可以可靠地检测键入的字符的关键事件. keyup和keydown不会这样做.
>代码通过阻止keypress事件的默认操作来手动处理括号/括号的插入.
>使用DOM方法时,选择/插入符号很简单.
>这在IE< = 8中不起作用,它具有不同的范围和选择API.如果您需要支持这些浏览器,我建议您使用我自己的Rangy库.没有它可能,但我真的不想写额外的代码.

演示：

http://jsfiddle.net/HPeb2/

码：

var editableEl = document.getElementById("editable");
editableEl.addEventListener("keypress",function(e) {
    var charTyped = String.fromCharCode(e.which);
    if (charTyped == "{" || charTyped == "(") {
        // Handle this case ourselves
        e.preventDefault();

        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            // First,delete the existing selection
            var range = sel.getRangeAt(0);
            range.deleteContents();

            // Insert a text node at the caret containing the braces/parens
            var text = (charTyped == "{") ? "{}" : "()";
            var textNode = document.createTextNode(text);
            range.insertNode(textNode);

            // Move the selection to the middle of the inserted text node
            range.setStart(textNode,1);
            range.setEnd(textNode,1);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
},false);