Here I am

home

How to control what is copy-pasted to/from the clipboard in Chrome, Firefox and Safari

02 Dec 2013

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.