IE 10 上带有可编辑 'pre' 标签的错误

Question

我发现 IE 10 有一些奇怪的行为。我猜这是错误，但我没有在这里或 Google 中找到任何关于它的描述，所以我不太确定。

这笔交易是可编辑的 "pre" 标签的问题。其实有两个问题。

它可以在 IE10 上的 JSFiddler 中重现：

<pre contentEditable="true">
    some text, it's editable
    text  <label contentEditable="false">it's not!!! test</label>
    some text
</pre>

这是我在JSFiddler上录制的link和demo（由于信誉不佳无法附上图片，所以我只给你一个link）。

一些描述：

我无法在行尾添加文本。当我将插入符设置到末尾并开始输入内容时，文本出现 在新行 上。我无法在其他浏览器上重现此内容（IE 8-9、11 工作正常）。我不知道是什么问题。但是当我在同一行修改文本时，但在行的中间，之后 - 一切正常（如预期的那样）并且我可以在结尾添加文本。
我可以编辑不可编辑的子块。正如您在演示中看到的那样，我可以轻松地在不可编辑块的第一个和第二个字母之间移动光标（并且只有在它们之间，我不能向前移动）并更改文本。是的，它在其他浏览器中工作正常（我无法在块内编辑任何内容）。

任何人都可以确认这是一个错误还是我做错了什么？

如果有人知道任何解决方法，请分享。

Answer 1

谢谢大家的帮助！
我想我明白了。

是的，这是 IE10、contentEditable 标签和行结尾 \n 的错误。如果你拥有所有这些，那么当你到达 IE10 行的末尾时，将光标 after \n 符号，当你尝试输入一些文本时 - 它发生在换行的开始。
此外，当你看到光标在行尾或下一行的开头时，IE10 看不出有任何区别（你可以看到它是视觉的，但在内部 - 没有区别）。

经过几天的调查，我没有找到克服这种行为的方法（或区分这些状态的方法）。
所以，我只是将所有 \n 替换为 <br />:

if (IE.isTheBrowser && IE.actualVersion === 10) {
    var newLineFix = new RegExp("\n", "g");
    s = s.replace(newLineFix, "<br />");
}

就是这样！错误不再出现。

关于编辑不可编辑子项的第二期。我只是编写了以下修复程序（在用户输入符号时发生）：

function getOldRange() {
    return document.selection.createRange();
}

function onKeyPress() {
    if (getOldRange()) {
        var oldRange = getOldRange();

        if (IE.isTheBrowser && IE.actualVersion === 10) {
            var parent = oldRange.parentElement();

            if (parent.getAttribute("contentEditable") === "false") {
                var newRange = document.createRange();
                newRange.setStartAfter(parent);
                newRange.setEndAfter(parent);

                var selection = getNewSelection();
                selection.removeAllRanges();
                selection.addRange(newRange);
            }
        }

        ...
    }
}

我知道这是一些混乱的代码，但它非常适合我！

希望对大家有所帮助。

IE 10 上带有可编辑 'pre' 标签的错误

Bug with editable 'pre' tag on the IE 10

html

internet-explorer

contenteditable

internet-explorer-10

pre