开发者

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

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.


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


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/


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)})}();
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜