終於知道為啥網頁不讓我複製貼上了！

daqianmen發表於2021-09-11
網頁
摘要：我們在專案中，通常為了保證資料安全性和保護使用者個人資訊，個別頁面需要禁用右鍵、複製、貼上以及輸入框自動填充的功能。所以在此補充和總結幾條我們開發中常用的操作方式。

前言

我們在專案中，通常為了保證資料安全性和保護使用者個人資訊，個別頁面需要禁用右鍵、複製、貼上以及輸入框自動填充的功能。所以在此補充和總結幾條我們開發中常用的操作方式。

終於知道為啥網頁不讓我複製貼上了！

一、禁用滑鼠右鍵

1.1、分析說明

透過禁用右鍵選項卡的方式來禁用複製貼上以及其他非法操作。

1.2、操作原理

我們透過 JS 中的 button 事件屬性來實現滑鼠右鍵的禁用。透過彈出提示框來代替右鍵選項卡。

1.3、實現效果

終於知道為啥網頁不讓我複製貼上了！

1.4、實現程式碼

將下列 JS 程式碼匯入需要禁用右鍵的頁面的<script>標籤對中即可：

function click() { 
    if (event.button==2) { 
        alert('對不起，本頁禁用右鍵！') 
    } 
} 
document.onmousedown=click;

1.5、補充：JS 中的 button 事件屬性

button 事件屬性返回一個整數，用於指示當事件被觸發時哪個滑鼠按鍵被點選。

語法如下：

event.button==0|1|2;

終於知道為啥網頁不讓我複製貼上了！

二、禁用複製貼上

2.1、分析說明

透過禁用快捷鍵 Ctrl+C/V/X 來禁止使用者在當前頁面複製、貼上（剪下）。

2.2、實現程式碼

頁面整體禁用複製貼上，在頁面 body 標籤中加入如下程式碼即可：

<!-- 禁止全選、複製、貼上 -->

<body onselectstart="return false" onpaste="return false" oncopy="return false" oncut="return false">

引數說明：

終於知道為啥網頁不讓我複製貼上了！

三、禁用輸入框自動填充功能

3.1、分析說明

如果我們不對輸入框進行設定的話，之前使用者輸入的記錄會在下一次輸入的時候自動填充。你當然不希望你在某個小網站看的記錄被另一個同學登入時使用者名稱自動填充，讓人家發現你的小秘密？

終於知道為啥網頁不讓我複製貼上了！

那我們就透過禁用輸入框自動填充，使得之前使用者輸入的記錄不會在另一個使用者輸入時自動填充，起到保護使用者個人資訊隱私的作用。

3.2、實現效果

終於知道為啥網頁不讓我複製貼上了！

3.3、實現程式碼

在輸入框的屬性中新增autocomplete="off"屬性即可：
<input name="username" type="text" placeholder="請輸入您的賬號" autocomplete="off" minlength="8" maxlength="20">
<input name="password" type="password" placeholder="請輸入您的密碼" autocomplete="off" minlength="8" maxlength="20">

總結

原生 JS 是充滿魅力的，永遠不要為了追求現成的框架而捨本逐末。在開發中為了保護使用者隱私和資訊保安，我們需要在各個方面都要在做到嚴謹，以給使用者最佳的體驗，無論是前端還是後端，都要充分把細節做到位，任何事的前提都是先做一個合格的程式設計師。技術驅動服務，服務帶來盈利和收益。

 本文分享自華為雲社群《》，原文作者：白鹿第一帥 。

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1727/viewspace-2796154/，如需轉載，請註明出處，否則將追究法律責任。

相關文章