使用 contenteditable 进行内联自动更正

Question

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

Answer 1

核心替换节点输入功能可以由这个函数提供支持：

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() 以使用 RegExp 可能会允许更精确的定位（例如仅全词，忽略 cAsE 等），但这将按原样工作并且 RegExp 升级不会更改其余代码。

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

必填项fiddle：http://jsfiddle.net/p0dxdnub/

使用 contenteditable 进行内联自动更正

Inline autocorrect with contenteditable

javascript

jquery

contenteditable