Can I make a bookmarklet put some text into the clipboard?

Question

Say I wanted to have bit of text (actually 4 different addresses) that I'd like to be able to easily (and frequently) paste. Is there a way I can make a bookmarklet that will put those addresses into the clipboard? I'd like to be able to click the appropriate one, then right click + Paste.

Answer 1

Yes it's possible, have a look at zeroclipboard (note: requires flash). Also see this previous question.

Answer 2

Try building a Firefox extension instead of a bookmarklet. Mozilla XUL (extension language) lets you do copy-paste. Another option is a Java Applet.

http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

Answer 3

Method with no third-party libraries

While zeroclipboard could potentially work, this method will allow you to visually select an element and automatically copy the inner text to your clipboard without having to download any third-party libraries. It is based on this function by Arne Hartherz and modified to work both in HTTPS and HTTP contexts.

Readable version:

var overlay = document.createElement('div');
Object.assign(overlay.style, {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 99999999,
    background: 'transparent',
    cursor: 'crosshair'
});
document.body.append(overlay);

function copyToClipboard(textToCopy) {
    // navigator clipboard api needs a secure context (https)
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard api method'
        return navigator.clipboard.writeText(textToCopy);
    } else {
        // text area method
        let textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        // make the textarea out of viewport
        textArea.style.position = "fixed";
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((res, rej) => {
            // here the magic happens
            document.execCommand('copy') ? res() : rej();
            textArea.remove();
        });
    }
};

function getElement(event) {
    overlay.style.pointerEvents = 'none';
    var element = document.elementFromPoint(event.clientX, event.clientY);
    overlay.style.pointerEvents = 'auto';

    return element;
}

document.addEventListener('mousemove', function(event) {
    var element = getElement(event);
    if (!element) return;

    var position = element.getBoundingClientRect();

    Object.assign(overlay.style, {
        background: 'rgba(0, 128, 255, 0.25)',
        outline: '1px solid rgba(0, 128, 255, 0.5)',
        top: '' + position.top + 'px',
        left: '' + position.left + 'px',
        width: '' + position.width + 'px',
        height: '' + position.height + 'px'
    });
});

overlay.addEventListener('click', function(event) {
    var element = getElement(event);
    var text = element.textContent || element.value;
    text = text.replace(/\n[ \n]+\n/g, "\n").replace(/\n\n+/g, "\n\n").replace(/^\n+|\n+$/g, '');
    if (!text.match("\n")) text = text.replace(/^ +| +$/, '')

    copyToClipboard(text);
    document.body.removeChild(overlay);
});

Minified version for use in bookmarklet:

javascript:void function(){function a(a){if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(a);else{let b=document.createElement("textarea");return b.value=a,b.style.position="fixed",b.style.left="-999999px",b.style.top="-999999px",document.body.appendChild(b),b.focus(),b.select(),new Promise((a,c)=>{document.execCommand("copy")?a():c(),b.remove()})}}function b(a){c.style.pointerEvents="none";var b=document.elementFromPoint(a.clientX,a.clientY);return c.style.pointerEvents="auto",b}var c=document.createElement("div");Object.assign(c.style,{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:99999999,background:"transparent",cursor:"crosshair"}),document.body.append(c);document.addEventListener("mousemove",function(a){var d=b(a);if(d){var e=d.getBoundingClientRect();Object.assign(c.style,{background:"rgba(0, 128, 255, 0.25)",outline:"1px solid rgba(0, 128, 255, 0.5)",top:""+e.top+"px",left:""+e.left+"px",width:""+e.width+"px",height:""+e.height+"px"})}}),c.addEventListener("click",function(d){var e=b(d),f=e.textContent||e.value;f=f.replace(/\n[ \n]+\n/g,"\n").replace(/\n\n+/g,"\n\n").replace(/^\n+|\n+$/g,""),f.match("\n")||(f=f.replace(/^ +| +$/,"")),a(f),document.body.removeChild(c)})}();