javascript - 在用户输入 contenteditable div 时替换最后一个字符

Question

我在 SE 的某个地方发现了一个代码，用于在 Tim Down 的 contenteditable 中插入文本。代码如下所示并且运行良好。但是我想添加一个基于我的要求的条件，并且想以某种方式修改代码但是在尝试了这么多之后都没有成功。

function insertTextAtCursor(value, stepback) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);         
            textNode = document.createTextNode(value);


           //Check value of stepback: 0 or 1
            if(!stepback)//if 0
                 range.insertNode(textNode);
            if(stepback){ //if 1
               // replace the previously inserted character with the new one here

            }

            // Move caret to the end of the newly inserted text node   
            range.setStart(textNode, textNode.length);
            range.setEnd(textNode, textNode.length);

            sel.removeAllRanges();
            sel.addRange(range);          

        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(text);
    }
}

我在这里检查 stepback 参数的值，它是 0 或 1。如果为 0，则将插入按下的字符，但如果为 1，我想用新字符替换最后一个字符。在我的例子中，当按下一个键后紧跟一个元音(例如，按下 m 后跟 a)时，后退返回 1。我怎样才能修改代码来实现这个条件？花了几天时间弄清楚这个问题，但无济于事。

谢谢。

Answer 1

代替以下内容:

//Check value of stepback: 0 or 1
if(!stepback)//if 0
     range.insertNode(textNode);
if(stepback){ //if 1
   // replace the previously inserted character with the new one here

}

使用以下代码:

// This clones the selected range and then selects 1
// 1 character in the backward direction and deletes it.
if(stepback){
    clone = range.cloneRange();
    clone.setStart(range.startContainer, range.startOffset - 1);
    clone.setEnd(range.startContainer, range.startOffset);
    clone.deleteContents();
}
range.insertNode(textNode);

这确保新翻译的字符始终添加在末尾，同时可选择删除 1 字符以防需要后退。

更新:我仅在 Chromium 中对此进行了测试。