代码之家 › 专栏 › 技术社区 › Macha

跨浏览器隐藏选择显示的方法

selection browser css

Macha · 技术社区 · 15 年前

我正在做一个基于浏览器的javascript游戏。因此,在游戏中,用户无需复制/粘贴文本。但是,在许多地方,用户需要点击和拖动来在游戏中进行选择。

在游戏中有许多单元格,内部只有普通的表格单元格,有一个不间断的空间来阻止它们在Firefox中崩溃(我可以用CSS阻止IE、Safari和Opera中的崩溃,但由于某些原因,它在Firefox中不起作用,所以我使用不间断的空间),要么是纯色背景,要么是背景图像。

当玩家拖动一个选项时,游戏通过改变背景色来突出显示单元格。但是,浏览器也会突出显示不间断的空间,在某些单元格中留下灰色矩形。

此外,浏览器使用不同的方法来确定选择的内容与游戏不同。

例如,在5 x 5的正方形中,如果用户选择(1,1)到(3,3),游戏将突出显示以下选择:

|   |   |   |   |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   |   |   |   |   |

但浏览器会突出显示以下非中断空格:

|   |   |   |   |   |
|   |   | X | X | X |
| X | X | X | X | X |
| X | X | X | X |   |
|   |   |   |   |   |

有没有办法阻止浏览器选择样式显示通过?至少在火狐和Chrome中是这样,但最好是跨浏览器。

2 回复 | 直到 12 年前

Community George Mulligan 7 年前

对于Firefox,您可以添加CSS样式:( mozilla guide )

-moz-user-select: none

对于Chrome和Safari:(还找不到可靠的来源)

-khtml-user-select:none

如果您喜欢JavaScript解决方案,这里是我从 previous answer :

<div onselectstart="return false">some stuff</div>

Community George Mulligan 7 年前

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

推荐文章

muzzie · Javascript createRange。如何仅使用一个脚本选择不同的跨距?

7 年前

Harrison Cramer · 在D3中操纵不透明度和文本。js公司

7 年前

Zenoo · 自定义SO的代码段选择背景

7 年前

pradeepradyumna · C#Listview避免默认行选择[重复]

7 年前

Nilambari · Vaadin无法在组合框值更改时更新网格容器

7 年前

Thundersheep · 变量的子选择

7 年前

Tobi · Contenteditable:如何在按del或backspace时完全删除span

7 年前

Osti · 禁用在DatagridComboBox中选择特定项

7 年前

Omar Boshra · 在edittext中更改文本之前获取光标起始索引

7 年前

vasf · 使用javascript的文本选择在chromium中不可见

7 年前