# HTML如何設置文字無法選中
在網頁設計中，有時我們需要保護頁面內容不被用戶隨意復制或選中。本文將詳細介紹通過HTML和CSS實現文字不可選中的幾種方法，并分析其兼容性和應用場景。
---
## 一、CSS user-select 屬性
**最推薦的方法**是使用CSS3的`user-select`屬性：
```css
.unselectable {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
user-select: none; /* 標準語法 */
}
應用示例：
<p class="unselectable">這段文字無法被選中</p>
特點： - 現代瀏覽器廣泛支持（IE10+） - 不會影響其他交互功能 - 可通過繼承影響子元素
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
element.onmousedown = function() { return false; }
適用場景： - 需要動態控制選中狀態時 - 兼容老版本瀏覽器（IE9以下）
早期瀏覽器支持但已不推薦的方法：
<body onselectstart="return false;">
缺點： - 不符合現代標準 - 可能被瀏覽器安全策略阻止
img {
pointer-events: none;
user-select: none;
}
body {
user-select: none;
}
<div style="user-select:none;">
受保護內容
<div style="user-select:text;">可選中內容</div>
</div>
安全提醒：
可訪問性影響：
瀏覽器兼容：
-webkit-前綴<!DOCTYPE html>
<html>
<head>
<style>
.protected {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<div class="protected">
<h2>版權內容</h2>
<p>本段文字受保護，無法通過常規方式選中</p>
</div>
<div>
<h2>普通內容</h2>
<p>這段文字可以自由選中</p>
</div>
</body>
</html>
通過合理運用這些技術，可以在不犧牲用戶體驗的前提下實現內容保護。建議優先使用CSS方案，并根據實際需求選擇兼容性處理方案。 “`
（全文約700字，包含代碼示例和實用說明）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
