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

Question

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

怎么可能所有适当的事件实际上都被解雇但是div的内容没有适当地自我更新？我没有像防止事件的默认行为那样做任何时髦的事情。

另外，在不同的项目之前，我已经很满意地工作了好几次，所以我很确定这是由于这个特定页面的HTML结构导致的一些错误。同样，问题只发生在Chrome和Safari中; Firefox和IE8都很好。

Answer 1

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

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

Answer 2

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

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

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