contenteditable div 在 webkit 中实际上不可编辑答案

【问题标题】：contenteditable div not actually editable in webkitcontenteditable div 在 webkit 中实际上不可编辑
【发布时间】：2011-05-14 04:01:06
【问题描述】：

我有一个 div，其 contenteditable 属性设置为 true，但是，当我在其中输入文本时，它不会显示闪烁的光标或更新。我为焦点、keydown 和 keypress 添加了事件侦听器，以查看 div 是否正在接收它们，并且确实如此！

怎么可能所有适当的事件实际上都在触发，而 div 的内容却没有适当地自我更新？我没有做任何时髦的事情，比如阻止事件的默认行为。

另外，我之前在不同的项目上已经多次让 contenteditable 工作得很好，所以我相当肯定这是由这个特定页面的 HTML 结构引起的一些错误。同样，该问题仅出现在 Chrome 和 Safari 中； Firefox 和 IE8 都可以。

【问题讨论】：

【解决方案1】：

我想与您分享此代码。它可能会帮助你！您禁用整个网站的用户选择和标注，然后覆盖 contenteditable 字段以允许用户选择。

html,body{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

*[contenteditable] {
    -webkit-user-select: auto !important;
}

【讨论】：

【解决方案2】：

好的，我发现了我的问题。我将 CSS 属性“-webkit-user-select”设置为 none 在相关 div 的层次结构中向上的元素上。因此，它阻止了光标定位在我的 contentEditable div 中。

有趣的是，相应的“-moz-user-select”（我也将其设置为无）不会以同样的方式影响 Firefox。

【讨论】：