700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JavaScript 事件:Web 表单如何实现禁用右键 复制粘贴/剪切和输入框自动填充?

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

时间:2022-12-29 15:16:31

相关推荐

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

文章目录

前言一、禁用鼠标右键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;

二、禁用复制粘贴

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">


总结

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。