我在 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。如何修改代码才能达到这个条件?花了几天时间来解决这个问题,但没有成功。
谢谢。
最佳答案
代替以下内容:
//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 中对此进行了测试。
关于javascript - 当用户在 contenteditable div 中输入时替换最后一个字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19995570/