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上记录的demo的链接（由于信誉低，我无法附上图片，所以我只给你一个链接）。

一些描述：

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

谁能确认这是一个错误还是我做错了什么？

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

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);
            }
        }

        ...
    }
}

我知道它的代码有点乱，但它非常适合我！

希望它对某人有所帮助。