内容可编辑div在Webkit中实际上不可编辑
我的div的contenteditable属性设置为true,但是,当我在其中键入文本时,它不会显示闪烁的光标或更新。我添加了事件监听器以进行焦点,击键和击键,以查看div是否正在接收它们,并且确实如此!
I have a div with the contenteditable attribute set to to true, however, it does not show a blinking cursor or update when I type text into it. I've added event listeners for focus, keydown, and keypress to see if the div is receiving them, AND IT IS!
所有合适的事件怎么可能实际触发了,但div的内容本身未适当更新吗?我没有做任何有趣的事情,例如防止事件的默认行为。
How could it be that all the appropriate events are actually firing yet the content of the div is not appropriately updating itself? I'm not doing anything funky like preventing the default behavior of the events.
此外,在不同项目上,我可以多次进行contenteditable的工作,所以我可以肯定,这是由该特定页面的HTML结构引起的。同样,该问题仅发生在Chrome和Safari中; Firefox和IE8都可以。
Also, I've gotten contenteditable working just fine several times before on different projects, so I'm fairly certain it's some bug being caused by the structure of this particular page's HTML. Again, the issue only occurs in Chrome and Safari; Firefox and IE8 are fine.
好,我知道了我的问题。在相关div层次结构的某个元素上,我将css属性 -webkit-user-select设置为none。因此,这阻止了光标永远位于我的contentEditable div中。
Okay, I figured out my problem. I had the css property '-webkit-user-select' set to none on an element way up the hierarchy of the div in question. Thus it was preventing the cursor from ever being positioned within my contentEditable div.
有趣的是,相应的'-moz-user-select'(我也将其设置为none层次结构)不会以相同的方式影响Firefox。
Interestingly, the corresponding '-moz-user-select' (which I also have set to none up the hierarchy) does not affect Firefox in the same way.