In this article, we have created a simple user interface using HTML and CSS, where there is an input field on which Right-Click, Copy, Cut, and Paste counts are displayed. When the user tries to perform these operations, a warning or error message is displayed, and the counter value is incremented for each operation. We can use this application for the input fields that are highly concerned with security, like passwords, OTP, etc. where the user cannot paste the passwords from other sources and also cannot view the page source code.
Preview Image
Prerequisites
Approach
- Firstly, we need to create the application structure using HTML tags like <div>, <h1> for the heading (GeeksforGeeks Disable Application>, <input> that will take the input from the user. <p> to display the count values when the user performs the operations.
- Then, we will create the styling file for the basic styling of our application, like the alignment of the components, padding of fields, color structure, and scheme of the elements.
- In the main JavaScript file, firstly, we are getting references to various HTML elements by using their IDs like a message (this is the element for showing the error message).
- Then we initialize the values of all the counts with 0.
- Now, by using the event listeners, we are setting up the ‘context menu’ for operations of right-click, copy, and paste on the inpBox element. For example, when the right-click event occurs, it prevents displaying the browser’s default context menu, and simultaneously, the value of the counter is also incremented.
- The function for showing the error message is created that passes the argument in the ‘errorMessage’ element. Using the setTimeOut function, the message disappeared after 2 seconds.
Example: This example shows the use of the above-explained approach.
HTML
<!-- HTML FILE --><!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
GeeksforGeeks Disable Application
</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>
GeeksforGeeks Disable Application
</h1>
<input class="input-box" type="text" id="myInput" placeholder="Enter Text">
<div class="warning-message" id="message" style="display: none;">
</div>
<p>Right-click Count:
<span id="rightClickCounter">
0
</span>
</p>
<p>Copy Count:
<span id="copyCounter">
0
</span>
</p>
<p>Paste Count:
<span id="pasteCounter">
0
</span>
</p>
</div>
<script src="./script.js"></script>
</body>
</html>
|
CSS
/* Style.css */body { font-family: Arial, sans-serif;
background-color: #f2f2f2;
} .container { max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px
rgba(0, 0, 0, 0.2);
border-radius: 5px;
} h1 {
color: #00a63f;
text-align: center;
font-size: 24px;
} .input-box { width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
display: block;
margin: auto;
} .warning-message { color: red;
font-size: 14px;
margin-top: 5px;
text-align: center;
} |
Javascript
// Script.js document.addEventListener( "DOMContentLoaded",
function () {
let inpBox =
document.getElementById(
"myInput");
let errorMessage =
document.getElementById(
"message");
let rightClickCnt =
document.getElementById(
"rightClickCounter");
let copyCounter =
document.getElementById(
"copyCounter");
let pasteCounter =
document.getElementById(
"pasteCounter");
let rightCnt = 0;
let copyCnt = 0;
let pasteCnt = 0;
// Function For Right Count
inpBox.addEventListener(
"contextmenu",
function (e) {
e.preventDefault();
rightCnt++;
rightClickCnt.textContent =
rightCnt;
showErrorMsg(
"Right-clicking is disabled."
);}
);
// Function For Copy Count
inpBox.addEventListener(
"copy",
function (e) {
e.preventDefault();
copyCnt++;
copyCounter.textContent =
copyCnt;
showErrorMsg(
"Copying is disabled."
);}
);
// Function for Paste Count
inpBox.addEventListener(
"paste",
function (e) {
e.preventDefault();
pasteCnt++;
pasteCounter.textContent =
pasteCnt;
showErrorMsg(
"Pasting is disabled."
);}
);
// Function for Display Error Message
function showErrorMsg(message) {
errorMessage.innerText =
message;
errorMessage.style.display =
"block";
setTimeout(function () {
errorMessage.style.display =
"none";
}, 2000);}
}
); |
Output: