文章目錄
- 前言
- 一、禁用鼠標右鍵
- 1.1、分析說明
- 1.2、操作原理
- 1.3、實現效果
- 1.4、實現代碼
- 1.5、補充：JS 中的 button 事件屬性
- 二、禁用復制粘貼
- 2.1、分析說明
- 2.2、實現代碼
- 三、禁用輸入框自動填充功能
- 3.1、分析說明
- 3.2、實現效果
- 3.3、實現代碼
- 總結
前言
我們在項目中，通常為了保證數據安全性和保護用戶個人信息，個別頁面需要禁用右鍵、復制、粘貼以及輸入框自動填充的功能，所以在此補充和總結幾條我們開發中常用的 JavaScript 事件操作方式。
一、禁用鼠標右鍵
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;
| 參數 | 描述 |
|---|---|
| 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">
參數說明：
| 參數 | 描述 |
|---|---|
| onselectstart=“return false” | 禁用選擇，防止復制 |
| οnpaste=“return false” | 禁用粘貼 |
| οncοpy=“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">
總結
原生 JavaScript 是充滿魅力的，永遠不要為了追求現成的框架而舍本逐末。在開發中為了保護用戶隱私和信息安全，我們需要在各個方面都要在做到嚴謹，以給用戶最佳的體驗，無論是前端還是后端，都要充分把細節做到位，任何事的前提都是先做一個合格的程序員。技術驅動服務，服務帶來盈利和收益。
我是白鹿，一個不懈奮斗的程序猿。望本文能對你有所裨益，歡迎大家的一鍵三連！若有其他問題、建議或者補充可以留言在文章下方，感謝大家的支持！
