css - 用户选择 :none breaking Safari contenteditable

Question

我有一个带有 contenteditable="true" 的 div。我可以使用 IE、Chrome 和 Firefox 但不能在 Safari 中将文本输入到 div 中。我最终将问题追溯到下面给 div 容器的样式声明。

container {
    -webkit-user-select : none;
    -moz-user-select    : none;
    -khtml-user-select  : none;
    -ms-user-select     : none;  
}

我不久前根据 Chrome taking first double-click 放入了这些以防止容器在双击时变成蓝色。现在我发现该解决方案破坏了 Safari contenteditable。

有没有人确切知道这些东西在做什么以及为什么它们会破坏 Safari contenteditable？

Answer 1

用户选择

此属性控制实际的 Selection操作⁰。这在您希望为用户提供更简单/更清晰的复制粘贴体验(而不是让他们不小心文本选择无用的东西，如图标或图像)的情况下很有用。¹

该属性如何运作的示例:http://jsfiddle.net/chriscoyier/vGG8F/3/

可能的解决方案

由于 Safari 是基于 webkit 构建的，-webkit-user-select : none; 是罪魁祸首。删除它将允许 contenteditable 再次工作。但是，由于您原来的问题，您需要它。

1. 其他人遇到了同样的问题，可能会提供解决方案。

   • contenteditable div not actually editable in webkit
   • Losing selected text from contenteditable on clicking div with css user-select: none;
   • ContentEditable focus in Chrome/Safari

2. 你也可以 catch the double click as suggested in your first question然后禁用 -webkit-user-select 允许 div 可编辑。编辑完成后，-webkit-user-select 可以设置回 none。

⁰ https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
¹ http://css-tricks.com/almanac/properties/u/user-select/