用户选择：无休止的Safari可编辑内容

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

user-select

此属性控制实际的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/

Answer 2

[Use CSS伪元素::selection。 Chrome，例如，版本1的supports。

Answer 3

让我补充一下JSuar的答案。 -webkit-user-select: none;不仅杀死了可编辑内容，而且-khtml-user-select: none;也杀死了可编辑内容。但是，设置显式-webkit-user-select: text;或-webkit-user-select: auto;会同时禁用这两个功能。

Answer 4

我找到了一个对我有用的解决方案。