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