終於知道為啥網頁不讓我復制粘貼了!


摘要:我們在項目中,通常為了保證數據安全性和保護用戶個人信息,個別頁面需要禁用右鍵、復制、粘貼以及輸入框自動填充的功能。所以在此補充和總結幾條我們開發中常用的操作方式。

前言

我們在項目中,通常為了保證數據安全性和保護用戶個人信息,個別頁面需要禁用右鍵、復制、粘貼以及輸入框自動填充的功能。所以在此補充和總結幾條我們開發中常用的操作方式。

一、禁用鼠標右鍵

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 是充滿魅力的,永遠不要為了追求現成的框架而舍本逐末。在開發中為了保護用戶隱私和信息安全,我們需要在各個方面都要在做到嚴謹,以給用戶最佳的體驗,無論是前端還是后端,都要充分把細節做到位,任何事的前提都是先做一個合格的程序員。技術驅動服務,服務帶來盈利和收益。

 本文分享自華為雲社區《表單頁面使用 JS 實現禁用右鍵和復制粘貼(剪切)功能原理以及操作說明》,原文作者:白鹿第一帥 。

 

點擊關注,第一時間了解華為雲新鮮技術~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM