Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Detect Copy-Paste Commands Using JavaScript
You'll learn how to use javascript to detect the keystrokes ctrl+v in this article. When a user wishes to paste something into an input field, they have two options: either they can use the context menu by right-clicking on the webpage or they may use their keyboard by pressing the CTRL and V buttons simultaneously.
The keydown event's ctrl attribute is used to figure out the key combination that contains "Ctrl." To identify whether "ctrl" is pushed or not during the key event is triggered, it produces a "boolean" value.
Syntax
event.ctrlKey
Return Value
true ? After pressing the "ctrl" key.
false ? If the "ctrl" key was not depressed.
Example 1
HTML source code ? The "index.html" file's code for detecting the "Ctrl+C" and "Ctrl+V" combination is shown below.
<!DOCTYPE html>
<html>
<title>How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body style="text-align:center">
<div class="container">
<textarea placeholder="Enter Text Here" cols="40" row="4"></textarea>
<textarea placeholder="Paste Text Here" cols="40" row="4"></textarea>
</div>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>
CSS source code ? The "style.css" file used in the above mentioned HTML file is shown in the following code.
.container{
display: flex;
flex-direction: column;
align-items: center;
}
textarea{
margin-top: 40px;
}
Code in JavaScript ? The code for the "script.js" file that is used in the above mentioned HTML file is shown in the following.
document.body.addEventListener("keydown", function (myEvent) {
// function that verifies the detection
myEvent = myEvent || window.event; // 'myEvent' is event object
let key = myEvent.which || myEvent.keyCode; // this is to detect keyCode
// Detecting Ctrl
let ctrl = myEvent.ctrlKey ? myEvent.ctrlKey : ((key === 17) ? true : false);
// if the key being pushed is V and ctrl is true.
if (key == 86 && ctrl) {
// print in result
document.getElementById("result1").innerHTML =("Ctrl+V is pressed.");
}
else if (key == 67 && ctrl) {
// if the key being pushed is C and the true value of ctrl
// print in result
document.getElementById("result2").innerHTML =("Ctrl+C is pressed.");
}
}, false);
Output
The above code will give the below output ?
Once you press Ctrl+C, you will see the desired message is printed as shown below.
Next, when you press Ctrl+V, you will see the desired message is printed as shown below.
Example 2
KeyboardEvent objects define a user's interaction with the keyboard; every event indicates a specific relationship between the user and a key or combination of a key and modifier keys on the keyboard. What type of keyboard activity took place is indicated by the event type (keydown, keypress, or keyup).
<!DOCTYPE html>
<html>
<title>How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<h4>You will see a detected result with an alert box when you press the keyboard shortcut Ctrl+C.
</h4>
<h4>You will see a detected result with an alert box when you press the keyboard shortcut Ctrl+V.
</h4>
<script>
document.addEventListener('keydown', evt => {
if (evt.key === 'c' && evt.ctrlKey) {
alert('You have been detected, you have pressed Ctrl+C');
} else if (evt.key === 'v' && evt.ctrlKey) {
alert('You have been detected, you have pressed Ctrl+V');
}
});
</script>
</body>
</html>
You will see this screen before pressing any shortcut key on the keyboard.
Next, you will see this screen after pressing the shortcut key Ctrl+C on the keyboard.
Further, you will see this screen after pressing the shortcut key Ctrl+V on the keyboard.
In Brief
Every programmer and system administrator knows the value of the keyboard shortcut Ctrl C + Ctrl V, which is a fundamental and universal combination built into the core of every OS environment.
The text you copy can be modified as you copy it by using JavaScript EventListener placing a CSS layer inside of a command to hide the payload. The above code or example uses the keydown event, which just so happens to be triggered when you press the keyboard shortcut for Ctrl+C. The execCommand("copy") command that performs this needs a trigger, also known as an "event" to run. After a 0.8 second delay, the text from your clipboard is replaced by the code.
4K+ Views
