JavaScript 事件：Web 表单如何实现禁用右键、复制粘贴/剪切和输入框自动填充？

白鹿第一帅

已于 2022-02-13 20:56:34 修改

阅读量1.6k

点赞数 3

分类专栏：前端基础开发与进阶实践文章标签：禁用右键禁用复制粘贴禁止输入框自动填充 JavaScript JavaScript事件

于 2020-10-10 11:51:11 首次发布

本文链接：https://blog.csdn.net/qq_22695001/article/details/108699686

版权

前端基础开发与进阶实践专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

前言
一、禁用鼠标右键
二、禁用复制粘贴
- 2.1、分析说明
- 2.2、实现代码
三、禁用输入框自动填充功能
总结

前言

我们在项目中，通常为了保证数据安全性和保护用户个人信息，个别页面需要禁用右键、复制、粘贴以及输入框自动填充的功能，所以在此补充和总结几条我们开发中常用的 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">