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;
}