Article Directory
Preface
In our projects, in order to ensure data security and protect users' personal information, individual pages need to disable the functions of right-clicking, copying, pasting, and auto-filling of input boxes. So here to add and summarize a few commonly used operation methods in our development.
1. Disable the right mouse button
1. Analysis description
Disable copy and paste and other illegal operations by disabling the right-click tab.
2. Principle of operation
We use the button event property in JS to disable the right mouse button. Replace the right-click tab by popping up a prompt box.
3. Realize the effect
4. Implementation code
Import the following JS code into the <script>tag center of the page that needs to be disabled :
function click() {
if (event.button==2) {
alert('对不起，本页禁用右键！')
}
}
document.onmousedown=click;
5. Supplement: button event attributes in JS
The button event property returns an integer that indicates which mouse button was clicked when the event was triggered.
The syntax is as follows :
event.button==0|1|2;
| parameter | description |
|---|---|
| 0 | Specifies the left mouse button |
| 1 | Specifies the middle mouse button |
| 2 | Specifies the right mouse button |
Two, disable copy and paste
1. Analysis description
Disable the shortcut key Ctrl+C/V/X to prohibit users from copying and pasting (cutting) on the current page.
2. Implementation code
Copy and paste is disabled for the entire page, just add the following code to the page body tag:
<!-- 禁止全选、复制、粘贴 -->
<body onselectstart="return false" onpaste="return false" oncopy="return false" oncut="return false">
Parameter Description:
| parameter | description |
|---|---|
| onselectstart = "return false" | Disable selection to prevent copying |
| οnpaste=“return false” | Disable paste |
| οncοpy=“return false” | Disable copy |
| oncut=“return false” | Disable cutting to prevent copying |
Three, disable the automatic filling function of the input box
1. Analysis description
If we do not set the input box, the record entered by the user before will be automatically filled in the next input. Of course you don’t want the records you read on a small website to be automatically filled in by another classmate’s username when logging in, so that people can discover your little secret?
Then we will disable the auto-fill of the input box so that the record entered by the user will not be automatically filled when another user enters, so as to protect the privacy of the user's personal information.
2. Realize the effect
3. Implementation code
Just add autocomplete="off"attributes to the attributes of the input box :
<input name="username" type="text" placeholder="请输入您的账号" autocomplete="off" minlength="8" maxlength="20">
<input name="password" type="password" placeholder="请输入您的密码" autocomplete="off" minlength="8" maxlength="20">
to sum up
Native JS is full of charm, never give up everything in pursuit of a ready-made framework. In order to protect user privacy and information security in development, we need to be rigorous in all aspects to give users the best experience, whether it is front-end or back-end, we must fully implement the details, the premise of everything Be a qualified programmer first. Technology drives service, and service brings profit and benefits.
Thank you for your support. I am Bailu, a programmer who works tirelessly. I hope this post can help everyone, and welcome everyone's one-click three-connection! If you have any questions, suggestions or additions, you can leave a message at the bottom of the post to help more people, and I will reply in time if I see it!
For more information, please pay attention to my WeChat public account : WDeerCode code circle !
