javascript - 内联自动更正与内容可编辑

Question

是否可以为内容可编辑字段制作类似于 iOS 中的自动更正功能的功能？当用户键入时，将检查拼写(我已经有了这部分)，但随后我需要一种方法来纠正单词。我可以替换 contenteditable 的整个 html，但是光标位置会丢失，并且用户有可能在重写 html 之前尝试输入。理想情况下，这只会替换用户光标之前的 x 个字符。这可能吗？

Answer 1

核心的“replace-in-node-being-typed in”功能可以通过此功能提供支持:

function runRep(from, to) {
    var sel = document.getSelection(),
        nd = sel.anchorNode,
        text = nd.textContent.slice(0, sel.focusOffset),
        newText = text.replace(from, to),
        wholeNew = nd.textContent.replace(text, newText),
        range = document.createRange();

    nd.textContent = wholeNew;
    range.setStart(nd, newText.length);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    nd.parentNode.focus()

}

用法:runRep("helo", "hello");，它将替换当前节点中光标左侧拼写错误的“hello”。您需要小心子字符串匹配。升级replace()以使用正则表达式可能会允许更精确的定位(例如仅整个单词，忽略大小写等)，但这将按原样工作，并且正则表达式升级不会更改代码的其余部分。

未显示的是如何实际检测拼写错误的单词，这是另一个主题......

强制性 fiddle :http://jsfiddle.net/p0dxdnub/