有没有办法阻止内容可编辑的插入符号出现在 IE 10 中的元素上？

Posted 2023-03-04

【中文标题】有没有办法阻止内容可编辑的插入符号出现在 IE 10 中的元素上？

【英文标题】：Is there a way to stop a contenteditable's caret from appearing over elements in IE10?

【发布时间】：2013-03-25 21:21:34

【问题描述】：

IE10 中似乎存在一个错误，如果我将一个元素放在另一个具有contenteditable 属性的元素上，编辑器的插入符号会覆盖所有内容。

您可以在下面的图片和jsFiddle 中看到这种行为。

我已经使用了大量的 CSS 属性，但无法找到解决方案。它在其他浏览器中按预期工作。

我需要这个的原因是因为我正在设计一个 WYSWIYG 编辑器 (TinyMCE fork) 体验，其中工具栏在需要时向下滑动 在文本上。这个错误使插入符号出现在工具栏的顶部。

我想到的唯一解决方案是模糊编辑器的焦点，并在工具栏消失时重新聚焦。但是，这会在工具栏被激活时阻止用户输入，并且还会导致跨浏览器的行为不一致。

是否有解决此错误的方法？

【问题讨论】：

如果不想编辑，可以将焦点设置在页面其他位置的一些input。

@EL 我希望允许用户继续编辑。也许我可以为 IE10 禁用它。

@alex 作为记录，这也将发生在普通的input 上；不需要contenteditable 属性。话虽如此，我几个月前就看到了这个，也没有找到解决方案。

这发生在 IE 中（可能回到 5.5），而不仅仅是 IE 10。它甚至是一个 bug 都是有争议的。

大声笑...这太不可思议了。我刚刚在Win7上安装了IE10，试图打开你的小提琴并且它崩溃了。完全地。 “Internet Explorer 已停止工作”。然后我在想，我知道Mercury 编辑器，它在 contenteditable 字段上有一个历史选项卡。所以我对自己说：“让我们看看他们是怎么做到的！”。答：他们没有。 “抱歉，您当前的浏览器不支持 Mercury Editor。”说真的：在遗漏了 3 个在 chrome MS 上工作的 IE 版本之后，我不可能再让我失望了……

【参考方案1】：

在 IE 中无法将插入符号与另一个元素重叠。这个问题被问了很多次：

Link 1 Link 2

...

但是您可以在获取插入符号位置后模糊文本区域（请参阅：Caret position in textarea, in characters from the start），然后显示您的工具栏。隐藏工具栏后，您可以再次聚焦文本区域，设置插入符号位置：

function setCaretPosition(elemId, caretPos) 
    var elem = document.getElementById(elemId);

    if(elem != null) 
        if(elem.createTextRange) 
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        
        else 
            if(elem.selectionStart) 
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            
            else
                elem.focus();
        
    

见：Set keyboard caret position in html textbox

【讨论】：

很惊讶我找不到重复的问题，我花了几个小时寻找。感谢您的回答。模糊焦点的问题是工具栏有粗体、斜体等所有选项。当我模糊文本区域时，用户的选择丢失了（至少 TinyMCE 检测到它的方式）。

最好给某人 500+ 代表，即使这并不能特别解决我的问题。

谢谢！如果您找到方法/解决方法，我很想知道。

【参考方案2】：

将-ms-user-select: none 添加到 contenteditable 元素。设置焦点将不会显示光标 - 猜测浏览器怪癖。一旦你点击左/右或输入另一个字符，光标可能会重新出现。

【参考方案3】：

您可以使用 javascript 和 CSS模拟插入符号并对其进行自定义。 通过适当的自定义，您可以针对此错误构建实用的解决方法。

这是一篇关于如何做到这一点的有趣文章： http://www.dynamicdrive.com/forums/showthread.php?17450-Emulating-a-terminal-like-caret-with-javascript-and-css

这是一个演示： http://shachi.prophp.org/demo.html

此外，还有一个 jQuery Terminal Emulator 插件，您可以根据自己的特定需求进行分叉和定制： http://terminal.jcubic.pl/#demo

【讨论】：

我不相信这会很好地与contenteditable'd 元素一起使用。

如果你一直按Del，第一个不起作用（插入符号删除错误的字符并消失在左边），第二个不适用于美国国际（引号+空格打印只是空间）。无论如何，这是一种解决方法，而不是解决方案。

它在某种程度上是 hacky，但可以在一个小实验中进行测试以确保它运行良好。如果它能够为您的 IE 用户提供完美的体验，也许值得这样做。

jQuery 插件似乎没有Del 的问题。 Del 在另一个方面很好，所以它的核心也需要改进！

【参考方案4】：

显而易见的解决方法是降低 contenteditable div 的高度，并将工具栏显示在可编辑区域上方而不是在其顶部。

【讨论】：

不过这样会破坏效果。