user-select:none破坏Safari contenteditable

Question

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

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

我在不久之前把它们放在Chrome上,首先双击以防止容器在双击时变成蓝色.现在我发现该解决方案打破了Safari contenteditable.

有谁知道这些事情究竟在做什么以及为什么他们打破了Safari contenteditable？

Answer 1

user-select

此属性控制实际的选择操作⁰.这在您希望为用户提供更简单/更清晰的复制粘贴体验的情况下非常有用(不会让他们意外地选择文本选择无用的东西,如图标或图像).¹

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

可能的解决方案

由于Safari建立在webkit上-webkit-user-select : none;是罪魁祸首.删除它将允许contenteditable再次工作.但是,由于您的原始问题,您需要这样做.

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

   • contenteditable div在webkit中实际上不可编辑
   • 使用css user-select:none;在单击div时从contenteditable中丢失所选文本;
   • ContentEditable专注于Chrome/Safari

2. 您也可以按照第一个问题中的建议捕捉双击,然后禁用-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/