user-select:none破坏Safari contenteditable
Chloemw 发布于 2023-02-07 17:02我有一个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？
-
user-select此属性控制实际的选择操作0.这在您希望为用户提供更简单/更清晰的复制粘贴体验的情况下非常有用(不会让他们意外地选择文本选择无用的东西,如图标或图像).1
该属性如何工作的示例:http://jsfiddle.net/chriscoyier/vGG8F/3/
可能的解决方案
由于Safari建立在webkit上
-webkit-user-select : none;是罪魁祸首.删除它将允许contenteditable再次工作.但是,由于您的原始问题,您需要这样做.其他人遇到了可能提供解决方案的同样问题.
contenteditable div在webkit中实际上不可编辑
使用css user-select:none;在单击div时从contenteditable中丢失所选文本;
ContentEditable专注于Chrome/Safari
您也可以按照第一个问题中的建议捕捉双击,然后禁用
-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/2023-02-07 17:04 回答
京公网安备 11010802041100号