文章目录

前言
一、禁用鼠标右键
- 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 是充满魅力的，永远不要为了追求现成的框架而舍本逐末。在开发中为了保护用户隐私和信息安全，我们需要在各个方面都要在做到严谨，以给用户最佳的体验，无论是前端还是后端，都要充分把细节做到位，任何事的前提都是先做一个合格的程序员。技术驱动服务，服务带来盈利和收益。

我是白鹿，一个不懈奋斗的程序猿。望本文能对你有所裨益，欢迎大家的一键三连！若有其他问题、建议或者补充可以留言在文章下方，感谢大家的支持！

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

javascript监听键盘事件 - 如表单enter回车提交
javascript监听键盘点击时间,比如:enter回车表单提交.禁止F5刷新.禁用鼠标右键等等本文仅简单做个介绍,权当抛砖引玉了:如果朋友们有更好的建议或者意见,欢迎留言评论. 代码如下: &l ...
一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service（2）--在事件注册表单上创建表单加载规则...
下面练习中,你将添加表单加载规则,将四个文本框域和图片控件与用户配置文件web service连接.当使用用户配置文件web service时,你需要将控件和来自web service合适的域绑定.这 ...
一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service（2）--在事件注册表单上创建表单加载规则
下面练习中,你将添加表单加载规则,将四个文本框域和图片控件与用户配置文件web service连接.当使用用户配置文件web service时,你需要将控件和来自web service合适的域绑定.这 ...
web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一.事件类型的分类事件分为一般事件.页面事件和表单事件二.一般事件关键字释义关键字释义 click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件 mouseove ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
web表单设计:点石成金_如何设计安全的Web表单：验证，清理和控制
web表单设计:点石成金 While cybersecurity is often thought of in terms of databases and architecture, much of ...
第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"><h2 class= ...
python-flask(二)集成bootstrap、集成web表单、集成邮件发送
文章目录一.flask集成bootstrap 1. 什么是Bootstrap? 2. Flask中如何集成Bootstrap? 3. Flask-Bootstrap实现了什么? 二.Flask中集成 ...
Web表单的十九个最佳设计实践
在Web设计和开发领域,创意是基础,而遵循最佳实践确保更好的可用性.功能性和易于使用更为重要.表单是用户在Web上处理事务时最讨厌的功能,因为经常看到难以理解的或者布局不清晰的表单.因此,在设计Web ...

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