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

Summary:

我试图达到当用户输入 a 时的效果( or [在内容可编辑的div， 第二) or ]是自动插入的，并且插入符号位于两者之间，即之间( and ).

FIDDLE http://jsfiddle.net/N6xFx/1/

在右侧键入--s 并看看它在第一行中如何工作，而在第二行中不起作用。

我的努力：

我正在使用这段代码（通过Tim Down https://stackoverflow.com/users/96100/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;
    }
}

Notes:

1. <div>将有子元素（主要是<br>s).
2. 使用 vanilla JS 仅需要 Chrome 支持

我的问题：

1. 为什么上面的功能不起作用？
2. 如何让它发挥作用？

我花了几个小时寻找这个并没有发现任何有用的东西。有些是关于孩子开始或结束时的设置div但对我来说，它可以是任何地点、任何地方。

UPDATE:

感谢大家终于开发完成 https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn!

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

• keypress是您可以可靠地检测到已键入哪个字符的唯一关键事件。keyup and keydown不会的。
• 该代码通过防止默认操作来手动处理括号/大括号的插入keypress event.
• 使用 DOM 方法时，选择/插入符的内容很简单。
• 这在 IE Rangy图书馆。没有它也是可能的，但我真的不想编写额外的代码。

Demo:

http://jsfiddle.net/HPeb2/ http://jsfiddle.net/HPeb2/

Code:

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