实现原网站“禁止选中文字”的效果

要实现原网站那种**“禁止选中文字”的效果，不需要写几十行 jQuery 代码去遍历每一个元素。利用 CSS 的继承性**，只需要几行代码就能全局生效。

这是最简洁、兼容性最好的 CSS 写法：

核心 CSS 代码

将这段代码加入你的 CSS 文件或 <style> 标签中：

CSS

/* 1. 全局禁止选中 */
body {
    -webkit-user-select: none; /* 兼容 Chrome, Safari, Opera */
    -moz-user-select: none;    /* 兼容 Firefox */
    -ms-user-select: none;     /* 兼容 IE 10+ */
    user-select: none;         /* 标准语法 */
}

/* 2. 特例：允许输入框和文本域被选中 (否则用户无法输入文字) */
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
}

代码原理解析

user-select: none;: 这是核心属性。我们直接把它加在 body 上。因为 CSS 样式有继承性，body 设置了不能选中，页面里所有的 div, p, span, table 等子元素都会自动继承这个属性，变成不可选中。
- 对比原网站： 原网站用 jQuery 遍历了几千个元素一个个加样式，效率极低且代码臃肿。用 CSS 写在 body 上，效果一模一样，但性能高得多。
input, textarea { user-select: text; }: 这是一个必要的“补丁”。如果我们禁止了所有东西的选中，用户就没法在输入框里用鼠标选中文字进行修改了。所以必须显式地把输入框改回 text（可选中）。

补充：如果还要禁止右键菜单（需配合极简 JS）

CSS 只能禁止“变蓝选中”，无法禁止“右键弹出菜单”。原网站为了保护得更彻底，还禁用了右键。

如果你也想要这个效果，只需要加这一行最简单的 JS（放在 <script> 标签里）：

JavaScript

// 禁止右键菜单
document.oncontextmenu = function() { return false; };

总结

你只需要上面那 8行 CSS 代码 加上这 1行 JS 代码，就能完美复刻原网站写了几十行甚至上百行代码才实现的“保护效果”。

文章版权归作者所有，未经允许请勿转载。

THE END

JavaScript