IE9 contenteditable 中显示错误的光标答案

【问题标题】：Wrong cursor showing in IE9 contenteditableIE9 contenteditable 中显示错误的光标
【发布时间】：2015-01-18 21:44:55
【问题描述】：

我有一些 html 如下（对于 IE9）：

<div contenteditable="true">
   Some editable text
   <span class="code" contenteditable="true" unselectable="on">uneditable text</span>
   more editable text
</div>

在 IE9 中，span contenteditable 必须设置为“true”以使 span 不可编辑，而在 Chrome 中，它设置为“false”以使 span 不可编辑！

但是，在 IE9 中，当鼠标移过跨度时，光标会显示为移动光标（交叉箭头）。光标在我的 css 文件中设置为“指针”，但这不适用于 IE9。

如何在 IE9 中将光标更改为手形或箭头？

【问题讨论】：

这里的属性名contententeditable只是这里贴出的代码中的一个错字，对吧？您的真实代码具有正确的名称contenteditable，对吗？如果是，请编辑问题。

标签： javascript html css internet-explorer-9

【解决方案1】：

以下内容在 IE9 和 Chrome 38 上都适用，跨度的内容是可编辑的，跨度之外的文本不可可编辑。当您将鼠标悬停在任何文本上时，光标也是您所期望的打字光标。

我注意到的唯一区别是，在 Chrome 上，span 在 edit 模式下以蓝色突出显示。

<div>
Some NOT editable text
<span class="code" contenteditable="true">EDITABLE text</span>
more NOT editable text
</div>

例如，在 Visual Stidio IDE 上的

HTML5 验证会告诉您 contententeditable 不是元素 div 的有效属性，并且 unselectable 也不是元素 span 的有效属性。

如果您仍然遇到光标问题，请发布您的 CSS。

【讨论】：

【解决方案2】：

使可编辑元素的子元素不可编辑是一件麻烦事，浏览器版本之间存在错误和不兼容；参见例如contenteditable=false inside contenteditable=true block is still editable in IE8 和 HTML contenteditable with non-editable islands

但是您显然已经找到了使用非标准属性unselectable=on 的解决方法（对于 IE）。通过使元素不可选择，它也使其不可编辑，因为无法编辑它。在这里对 IE 很重要的是这个属性，你应该使用逻辑 contenteditable=false 来覆盖其他浏览器。这将使光标成为text 光标，这比您现在拥有的更容易混淆。这可能会说是误导，但 IE 显然 IE 想要将 text 光标用于可编辑元素和他们的子元素（尽管不合逻辑的组合 contenteditable=true unselectable=on 似乎会导致 move 光标）。毕竟，它是可编辑的，包括不可编辑的岛，因为岛作为一个整体可以被移除或替换。无论如何，在此类问题中，IE 会忽略 CSS 中的 cursor 属性设置。

【讨论】：

我发现在 IE9 中你需要 unselectable="on" 和 contenteditable="true" 来确保 span 不能被编辑。 unselectable="on" 停止鼠标选择跨度并将光标放在其中。但是，如果您在外部 div 中编辑某些内容，则可以使用箭头键并导航到 span，然后在 IE 中将 contenteditable 设置为 false 时对其进行编辑。我希望有一种方法可以在 contenteditable="true" 和 unselectable="on" 时更改光标。