如何在網頁上禁用文本選擇及滑鼠右鍵
如果不希望讓別人輕易竊取網站內容、通常會選擇在網頁上禁用文本選擇(文字反白)、剪下、複製、貼上和滑鼠右鍵。這些需求可以借由CSS, JavaScript和jQuery來達成。因為我們在"如何在表單欄位中禁用貼上及拖放功能"文章中已經分享過禁用剪下、複製、貼上的作法，因此這些文章我們只分享禁用文本選擇及滑鼠右鍵的方法。
從這篇文章你會知道：
- 如何使用 CSS 禁用文本選擇(文字反白)
- 如何使用 JavaScript 禁用文本選擇
- 如何使用 JavaScript 禁用滑鼠右鍵
- 如何使用 jQuery 禁用滑鼠右鍵
延伸閱讀：
如何使用 CSS 禁用文本選擇(文字反白)
使用CSS禁用文本選擇非常的簡單，只要對想要禁用文本選擇的元素加上底下的CSS屬性就可以了。
-webkit-user-select: none; /*Chrome, Opera (older versions), IOS Safari*/ -webkit-touch-callout: none; /*Safari*/ -moz-user-select: none; /*Mozilla*/ -ms-user-select: none; user-select: none;
使用 CSS 禁用文本選擇(文字反白)的實例
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.unselectable {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #cc0000;
}
</style>
</head>
<body>
<p>這裡的文字可以被反白.</p>
<div class="unselectable">這裡的文字無法反白選取。</div>
</body>
</html>
使用CSS來禁用文本選擇(文字反白)，就算是Ctrl + A也沒有辦法選取文字
如何使用 JavaScript 禁用文本選擇
在網頁的元素上加上onmousedown="return false" onselectstart="return false" 就可以禁用文本選擇(文字反白)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>這裡的文字可以被反白.</p>
<div onmousedown="return false" onselectstart="return false">這裡的文字無法反白選取。</div>
</body>
</html>
onmousedown="return false" 和 onselectstart="return false" 二個單獨使用都可以禁用滑鼠反白的操作，但是如果只使用 onmousedown="return false"的情況下，Ctrl + A 還是可以全選文字，單獨使用onselectstart="return false"的話，則是連Ctrl + A也沒有辦法選取文字。
如何使用 JavaScript 禁用滑鼠右鍵
在<body>標籤上加上 oncontextmenu ="return false" 就可以防止使用者在網頁上點擊右鍵、叫出右鍵選單。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body oncontextmenu ="return false">
<p>這的網頁無法使用滑鼠右鍵叫出右鍵選單</p>
</body>
</html>
如何使用 jQuery 禁用滑鼠右鍵
跟"如何在表單欄位中禁用貼上及拖放功能"的作法相似，我們可以使用 jQuery bind()函數來禁用滑鼠右鍵。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<p>這的網頁無法使用滑鼠右鍵叫出右鍵選單</p>
<script>
$(document).ready(function() {
$("body").on("contextmenu", function(e) {
return false;
});
});
</script>
</body>
</html>
要提醒您一點、沒有任何方法可以100%的保證網站內容不被竊取，禁用文本選擇(文字反白)、剪下、複製、貼上和滑鼠右鍵這些作法只是讓過程稍微麻煩那麼一點點而已。
以上就是歐斯瑞本次 如何在網頁上禁用文本選擇及滑鼠右鍵 的分享
我要留言