CSS禁止文字选择user-select应用

关于用户文本选择的CSS属性user-select

你是否曾遇到过网页上的文本无法被用户选择的情况？这其实是CSS中的user-select属性在起作用。user-select属性控制用户是否可以选择文本。它有两个值：none和text。当设置为none时，用户无法选择文本；当设置为text时，用户可以选择文本。

值得注意的是，user-select并不是一个W3C的CSS标准属性，因此不同浏览器的支持情况并不完全理想。为了确保在各种浏览器上都能达到预期效果，我们需要针对每种浏览器进行特定的调整。

对于火狐浏览器，我们使用“-moz-user-select: none;”。对于webkit浏览器（如Chrome和Safari），我们使用“-webkit-user-select: none;”。对于IE10，我们使用“-ms-user-select: none;”。对于早期浏览器，我们使用“-khtml-user-select: none;”。为了确保在所有浏览器上都生效，我们设置了“user-select: none;”。

而对于IE6-9这些版本的浏览器，由于它们还没有相关的CSS属性支持，我们需要通过JavaScript来进行处理。我们可以设置body的onselectstart和ondrag事件，让它们返回false，以阻止文本被选择和拖动。

以下是代码示例：

```css

body {

-moz-user-select: none; / 火狐 /

-webkit-user-select: none; / webkit浏览器 /

-ms-user-select: none; / IE10 /

-khtml-user-select: none; / 早期浏览器 /

user-select: none;

}

```

```javascript

// IE6-9

document.body.onselectstart = document.body.ondrag = function() {

return false;

}

```

这样，无论用户使用的是哪种浏览器，都能有效地阻止文本被选择。如果你的页面需要让用户选择文本，只需将上述的none改为text即可。随着浏览器技术的不断进步，未来我们有望看到更多的浏览器原生支持user-select属性。