用户选择：无破坏 Safari 内容可编辑答案

【问题标题】：user-select:none breaking Safari contenteditable用户选择：无破坏 Safari 内容可编辑
【发布时间】：2013-12-29 08:34:32
【问题描述】：

我有一个带有 contenteditable="true" 的 div。我可以使用 IE、Chrome 和 Firefox 向div 输入文本，但不能使用 Safari。我终于将问题追溯到下面给 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？

【问题讨论】：

标签： css html safari contenteditable

【解决方案1】：

`user-select`

此属性控制实际的Selection 操作⁰。这在您希望为用户提供更轻松/更干净的复制粘贴体验的情况下非常有用（不会让他们意外地选择无用的内容，例如图标或图像）。¹

属性工作方式示例：http://jsfiddle.net/chriscoyier/vGG8F/3/

可能的解决方案

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

其他人也遇到了同样的问题，可能会提供解决方案。
您也可以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/

【讨论】：

哇！你成功了！我怎么能把我所有的问题都发给你？ :)
只是想确保您获得了 50 分。我的积分似乎恢复得非常快，可能我没有点击我应该给你积分的东西。（我所做的只是点击你答案的复选标记。）

【解决方案2】：

Use CSS 伪元素::selection。例如 Chrome，supports 从版本 1 开始。

【讨论】：

在 Mac 上的 Safari 中测试，蓝色高亮是透明的。

【解决方案3】：

让我补充一点 JSuar 的回答。不仅 -webkit-user-select: none; 会杀死 contenteditables，-khtml-user-select: none; 也会这样做。但是，设置显式 -webkit-user-select: text; 或 -webkit-user-select: auto; 可以同时禁用它们。

【讨论】：

【解决方案4】：

我找到了适合我的解决方案。

*[contenteditable]:empty {
    caret-color: rgba(0,0,0,0);
}

然后为左边框设置闪烁动画或简单地以指示焦点的方式设置输入的样式。

【讨论】：