You can control what the browser copies and pastes when a user uses keyboard shortcuts or the right-click context menu by getting in between the default sequence of events and changing focus to an element of your choice so that by the time the user input sequence is complete, it will be targeting the element and content you choose.
Handling keyboard shortcuts (Ctrl+C / Ctrl+V)
// 1. Add an event listener for `keydown` events
document.addEventListener('keydown', function (event) {
// 2. In this event listener, check if the [V] key is pressed while [Ctrl] is held
down (the paste shortcut).
if (event.keyCode === 86 && event.ctrlKey) {
// 3. If that is true, set focus to an input element so that a `paste`
// event is fired.
document.getElementByid('paste-target').focus();
}
// 4. Otherwise check if [Ctrl] and [C] or [X] were pressed (copy or cut).
else if (event.keyCode === 67 || event.keyCode === 88) {
// 5. If true, set focus to an input element and select the containted text. It is
this text that will be sent to the clipboard.
var copyTarget = document.getElementByid('copy-target');
copyTarget.focus();
copyTarget.select();
}
});
Handling right-click context menu cut/copy/paste
Taking control of the context of the context menu is a little more tricky. The
context-menu is shown at the end of a right-click and the context is of the
element that the mouse was over. By placing an element below the mouse between
the mousedown and mouseup events, you can set the context to be that of any
clickable element.
If this element is invisible then it does not interrupt the user’s workflow.
Style the right click target element so that it is invisible and placed off-screen.
#rc-target {
z-index : 9003;
width : 100px;
height : 100px;
margin : -50px; /* so it's positioned at it's centre */
opacity : 0;
border : none;
padding : 0;
position: absolute;
left : -1000px;
right : -1000px;
}
Add a mousedown event listener that checks for right-clicks
document.addEventListener('mousedown' function (event) {
if (event.button === 2) {
// If the button is the right mouse button, move the input element to the
// coordinates of the event
var rcTarget = document.getElementByid('rc-target');
rcTarget.style.left = event.pageX;
rcTarget.style.top = event.pageY;
// Then bring focus to the element and select the text inside it and prevent
// the default event behaviour
rcTarget.focus();
rcTarget.select();
event.preventDefault();
}
});
// Hide the `#rc-target` element on `mousemove`
document.addEventListener('mousemove', function (event) {
var rcTarget = document.getElementById('rc-target');
rcTarget.style.left = rcTarget.style.top = '';
});
After mouseup, the context menu will be displayed for the #rc-target element.
If the user clicks cut/copy/paste, it will relate to the text within the
element.
This way, you can have the user copy and paste whatever data you choose from anywhere in your web page/app.