表单页面使用 JS 实现禁用右键和复制粘贴（剪切）功能原理以及操作说明
表单页面使用 JS 实现禁用右键和复制粘贴（剪切）功能原理以及操作说明
文章目录
- 前言
- 一、禁用鼠标右键
- 1.1、分析说明
- 1.2、操作原理
- 1.3、实现效果
- 1.4、实现代码
- 1.5、补充：JS 中的 button 事件属性
- 二、禁用复制粘贴
- 2.1、分析说明
- 2.2、实现代码
- 三、禁用输入框自动填充功能
- 3.1、分析说明
- 3.2、实现效果
- 3.3、实现代码
- 总结
前言
我们在项目中，通常为了保证数据安全性和保护用户个人信息，个别页面需要禁用右键、复制、粘贴以及输入框自动填充的功能。所以在此补充和总结几条我们开发中常用的操作方式。
一、禁用鼠标右键
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">总结
原生 JS 是充满魅力的，永远不要为了追求现成的框架而舍本逐末。在开发中为了保护用户隐私和信息安全，我们需要在各个方面都要在做到严谨，以给用户最佳的体验，无论是前端还是后端，都要充分把细节做到位，任何事的前提都是先做一个合格的程序员。技术驱动服务，服务带来盈利和收益。
我是白鹿，一个不懈奋斗的程序猿。望本文能对你有所裨益，欢迎大家的一键三连！若有其他问题、建议或者补充可以留言在文章下方，感谢大家的支持！