使用 javascript 复制到所有浏览器的剪贴板

IT技术 javascript clipboard
2021-02-28 03:50:26

我试图让“复制到剪贴板”在所有浏览器上都能正常工作,但没有成功。

正在使用 javascript,我不想使用零剪贴板来做。

请让我们知道我的代码有什么问题。

感谢您的帮助。

以下是代码(目前我的代码仅适用于 IE 浏览器):-

<script type="text/javascript">
function copyToClipboard(s)
{
    if( window.clipboardData && clipboardData.setData )
    {
        clipboardData.setData("Text", s);
    }
    else
    {
        // You have to sign the code to enable this or allow the action in about:config by changing
        user_pref("signed.applets.codebase_principal_support", true);
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

        var clip = Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;

        // create a transferable
        var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;

        // specify the data we wish to handle. Plaintext in this case.
        trans.addDataFlavor('text/unicode');

        // To get the data from the transferable we need two new objects
        var str = new Object();
        var len = new Object();

        var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString);

        var copytext=meintext;

        str.data=copytext;

        trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]);

        var clipid=Components.interfaces.nsIClipboard;

        if (!clip) return false;

        clip.setData(trans,null,clipid.kGlobalClipboard);      
    }
}
</script>

<textarea id='testText' rows="10" cols="100">Enter your Sample text</textarea><br />
<button onclick="copyToClipboard(document.getElementById('testText').value);" >clipboard</button><br /><br />
<textarea rows="10" cols="100">Paste your text here</textarea><br />
4个回答

这适用于 Firefox 3.6.x 和 IE:

    function copyToClipboardCrossbrowser(s) {           
        s = document.getElementById(s).value;               

        if( window.clipboardData && clipboardData.setData )
        {
            clipboardData.setData("Text", s);
        }           
        else
        {
            // You have to sign the code to enable this or allow the action in about:config by changing
            //user_pref("signed.applets.codebase_principal_support", true);
            netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

            var clip = Components.classes["@mozilla.org/widget/clipboard;1"].createInstance(Components.interfaces.nsIClipboard);
            if (!clip) return;

            // create a transferable

            var trans = Components.classes["@mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
            if (!trans) return;

            // specify the data we wish to handle. Plaintext in this case.
            trans.addDataFlavor('text/unicode');

            // To get the data from the transferable we need two new objects
            var str = new Object();
            var len = new Object();

            var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

            str.data= s;        

            trans.setTransferData("text/unicode",str, str.data.length * 2);

            var clipid=Components.interfaces.nsIClipboard;              
            if (!clip) return false;
            clip.setData(trans,null,clipid.kGlobalClipboard);      
        }
    }
我们需要所有浏览器通用的东西!!!,com'on 浏览器......你在哪里。你们会让 IE 在这个上打败你们吗?!
2021-04-17 03:50:26
这在Components已弃用的最新版本的 Firefox 中不起作用
2021-04-26 03:50:26
我应该为图像数据使用什么?(顺便说一句,你们有没有注意到@ravz 在他的评论中通知自己?)
2021-04-29 03:50:26
哇!这有效!但是通过调用诸如“Components.classes['@mozilla.org/widget/transferable;1']”之类的东西,我们是否要去Mozilla 站点?
2021-04-30 03:50:26

我也花了很多时间寻找这个问题的解决方案。这是我迄今为止发现的:

如果您希望您的用户能够单击按钮并复制一些文本,您可能必须使用 Flash。

如果您希望您的用户在页面上的任何位置按 Ctrl+C,但始终将 xyz 复制到剪贴板,我在 YUI3 中编写了一个全 JS 解决方案(尽管它可以轻松移植到其他框架,或者原始 JS,如果您是感觉特别自我厌恶)。

它涉及在屏幕外创建一个文本框,一旦用户按下 Ctrl/CMD 就会突出显示该文本框。当他们很快点击“C”时,他们复制隐藏的文本。如果他们点击“V”,他们会在粘贴事件触发之前被重定向到一个容器(您选择的)。

这种方法可以很好地工作,因为当您在正文的任何​​位置侦听 Ctrl/CMD 按键时,“A”、“C”或“V”按键侦听器仅附加到隐藏的文本框(而不是整个正文)。它也不必打破用户的期望——如果你没有选择复制任何东西,你只会被重定向到隐藏的框!

这是我在我的网站上所做的工作,但如果有更新,请检查http://at.cg/js/clipboard.js

YUI.add('clipboard', function(Y) {


// Change this to the id of the text area you would like to always paste in to:

pasteBox = Y.one('#pasteDIV');


// Make a hidden textbox somewhere off the page.

Y.one('body').append('<input id="copyBox" type="text" name="result" style="position:fixed; top:-20%;" onkeyup="pasteBox.focus()">');
copyBox = Y.one('#copyBox');


// Key bindings for Ctrl+A, Ctrl+C, Ctrl+V, etc:

// Catch Ctrl/Window/Apple keydown anywhere on the page.
Y.on('key', function(e) {
    copyData();
        //  Uncomment below alert and remove keyCodes after 'down:' to figure out keyCodes for other buttons.
        //  alert(e.keyCode);
        //  }, 'body',  'down:', Y);
}, 'body',  'down:91,224,17', Y);

// Catch V - BUT ONLY WHEN PRESSED IN THE copyBox!!!
Y.on('key', function(e) {
    // Oh no! The user wants to paste, but their about to paste into the hidden #copyBox!!
    // Luckily, pastes happen on keyPress (which is why if you hold down the V you get lots of pastes), and we caught the V on keyDown (before keyPress).
    // Thus, if we're quick, we can redirect the user to the right box and they can unload their paste into the appropriate container. phew.
    pasteBox.select();
}, '#copyBox',  'down:86', Y);

// Catch A - BUT ONLY WHEN PRESSED IN THE copyBox!!!
Y.on('key', function(e) {
    // User wants to select all - but he/she is in the hidden #copyBox! That wont do.. select the pasteBox instead (which is probably where they wanted to be).
    pasteBox.select();
}, '#copyBox',  'down:65', Y);



// What to do when keybindings are fired:

// User has pressed Ctrl/Meta, and is probably about to press A,C or V. If they've got nothing selected, or have selected what you want them to copy, redirect to the hidden copyBox!
function copyData() {
    var txt = '';
    // props to Sabarinathan Arthanari for sharing with the world how to get the selected text on a page, cheers mate!
        if (window.getSelection) { txt = window.getSelection(); }
        else if (document.getSelection) { txt = document.getSelection(); }
        else if (document.selection) { txt = document.selection.createRange().text; }
        else alert('Something went wrong and I have no idea why - please contact me with your browser type (Firefox, Safari, etc) and what you tried to copy and I will fix this immediately!');

    // If the user has nothing selected after pressing Ctrl/Meta, they might want to copy what you want them to copy. 
        if(txt=='') {
                copyBox.select();
        }
    // They also might have manually selected what you wanted them to copy! How unnecessary! Maybe now is the time to tell them how silly they are..?!
        else if (txt == copyBox.get('value')) {
        alert('This site uses advanced copy/paste technology, possibly from the future.\n \nYou do not need to select things manually - just press Ctrl+C! \n \n(Ctrl+V will always paste to the main box too.)');
                copyBox.select();
        } else {
                // They also might have selected something completely different! If so, let them. It's only fair.
        }
}
});

希望其他人觉得这很有用:]

如果用户使用鼠标复制到剪贴板怎么办?需要 Ctrl / Cmd 按键似乎很脆弱。
2021-04-18 03:50:26

出于安全原因,大多数浏览器不允许修改剪贴板(当然,IE 除外...)。

使复制到剪贴板功能跨浏览器兼容的唯一方法是使用 Flash。

使用copy事件可以设置文本数据。如果不使用本机功能,则通过选择要复制的一些隐藏文本。
2021-05-17 03:50:26

我认为 zeroclipboard 很棒。此版本适用于最新的 Flash 11:http : //www.itjungles.com/javascript/javascript-easy-cross-browser-copy-to-clipboard-solution

Asker 已经声明 ZeroClipboard 不是初学者。
2021-05-09 03:50:26