css – 用户选择:没有破坏Safari可容忍

前端之家收集整理的这篇文章主要介绍了css – 用户选择:没有破坏Safari可容忍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个含有contenteditable = div的div.我可以用IE,Chrome和Firefox,而不是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的可容忍性.

有没有人知道这些事情正在做什么,为什么他们打破了Safari的可容忍性?

解决方法

用户选择

属性控制实际的Selection操作0.这在您希望为用户提供更简单/更干净的复制粘贴体验的情况下非常有用(没有意外地将文字选择无用的东西,如图标或图像).1

房产如何运作的例子:http://jsfiddle.net/chriscoyier/vGG8F/3/

可能的解决方

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

>其他人遇到同样的问题,可能会提供一个解决方案.

> 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

>您也可以使用catch the double click as suggested in your first question,然后禁用-webkit-user-select,允许div被编辑.编辑完成后,可以将-webkit-user-select设置为none.

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

猜你在找的CSS相关文章