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

Question

我有一个div，其contenteditable属性设置为true，但是，当我向其中键入文本时，它不显示闪烁的光标或更新。我已经添加了焦点，keydown和按键的事件监听器来查看div是否在接收它们，而且它是！

这怎么可能是所有适当的事件实际上正在发射但div的内容没有适当地更新自己？我没有做任何事情，比如阻止事件的默认行为。

另外，我已经在不同的项目中工作过很多次了，所以我相当肯定它是一些由这个特定页面的HTML结构引起的错误。同样，这个问题只发生在Chrome和Safari上; Firefox和IE8都很好。

Answer 1

好的，我想出了我的问题。我将CSS属性'-webkit-user-select'设置为none，但是在所讨论的div层次结构的元素上。因此它阻止了游标被定位在我的contentEditable div中。

有趣的是，相应的'-moz-user-select'（我也在层次结构中设置为none）不会以同样的方式影响Firefox。

Answer 2

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

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

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