Question

我有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？

Answer 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/

Answer 2

Use CSS伪元素::selection。例如，Chrome版本为supports版本。

Answer 3

让我在JSuar的回答中加一点。不仅-webkit-user-select: none;杀死了满足的人，而-khtml-user-select: none;也会这样做。但是，设置明确的-webkit-user-select: text;或-webkit-user-select: auto;会导致作业无效。

Answer 4

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

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

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

user-select：none破坏Safari contenteditable

4 个答案:

`user-select`

可能的解决方案