提问



将文本复制到剪贴板的最佳方法是什么? (多浏览器)


我努力了:


function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}


但在Internet Explorer中,它会出现语法错误。在Firefox中,它说unsafeWindow is not defined


没有闪存的好技巧:Trello如何访问用户的剪贴板?

最佳参考


概述



有3个主要的浏览器API可用于复制到剪贴板:



  1. 异步剪贴板API [navigator.clipboard.writeText]


    • Chrome 66(2018年3月)中提供以文字为中心的部分

    • Access是异步的并且使用JavaScript Promises,可以编写,因此安全用户提示(如果显示)不会中断页面​​中的JavaScript。

    • 可以直接从变量将文本复制到剪贴板。

    • 仅支持通过HTTPS投放的网页。

    • 在Chrome中,Activity标签页中的66页可以在没有权限提示的情况下写入剪贴板。


  2. document.execCommand('copy')


    • 截至2015年4月,大多数浏览器都支持此功能(请参阅下面的浏览器支持)。

    • 访问是同步的,即在页面中停止JavaScript直到完成,包括显示和用户与任何安全提示进行交互。

    • 从DOM读取文本并将其放在剪贴板上。

    • 在测试期间〜2015年4月,只有Internet Explorer被注意为在写入剪贴板时显示权限提示。


  3. 覆盖复制事件


    • 请参阅覆盖复制事件的剪贴板API文档。

    • 允许您修改任何复制事件在剪贴板上显示的内容,可以包括纯文本以外的其他格式的数据。

    • 这里没有涉及,因为它没有直接回答这个问题。




一般发展说明



在测试控制台中的代码时,不要期望剪贴板相关命令正常工作。通常页面需要处于Activity状态(Async Clipboard API)或需要用户交互(例如用户点击)以允许(document.execCommand('copy'))访问剪贴板请参阅下面的详细信息。[50] [51] [52] [53]


Async + Fallback



由于浏览器支持新的Async Clipboard API,您可能希望回退到document.execCommand('copy')方法以获得良好的浏览器覆盖率。


这是一个简单的例子:




function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>



自动复制到剪贴板可能很危险,因此大多数浏览器(IE除外)都非常困难。就个人而言,我使用以下简单的技巧:


function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}


将向用户显示提示框,其中已选择要复制的文本。现在它足以按 Ctrl + C Enter (关闭框) - 瞧!


现在剪贴板复制操作是SAFE,因为用户手动完成(但是以非常简单的方式)。当然,适用于所有浏览器。




<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>



以下方法适用于Chrome,Firefox,Internet Explorer和Edge以及最新版本的Safari(在2016年10月发布的版本10中添加了复制支持)。



  • 创建一个textarea并将其内容设置为您要复制到剪贴板的文本。

  • 将textarea附加到DOM。

  • 选择textarea中的文字。

  • 调用document.execCommand(copy)

  • 从dom中删除textarea。



注意:您将看不到textarea,因为它是在Javascript代码的同一个同步调用中添加和删除的。


如果您自己实现这一点,需要注意的一些事项:



  • 出于安全原因,这只能从事件处理程序(如click)调用(就像打开窗口一样)。

  • IE将在第一次更新剪贴板时显示权限对话框。

  • IE,当textarea聚焦时,Edge将滚动。

  • execCommand()可能会抛出某些情况。

  • 除非您使用textarea,否则可能会吞下新行和制表符。 (大多数文章似乎建议使用div)

  • 当显示IE对话框时,textarea将可见,您需要隐藏它,或使用IE特定的clipboardData api。

  • 在IE系统中,管理员可以禁用剪贴板API。



以下功能应尽可能干净地处理以下所有问题。如果您发现任何问题或有任何改进建议,请发表评论。


// Copies a string to the clipboard. Must be called from within an 
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+, 
// Firefox 42+, Safari 10+, Edge and IE 10+.
// IE: The clipboard feature may be disabled by an administrator. By
// default a prompt is shown the first time the clipboard is 
// used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}


https://jsfiddle.net/fx6a6n6x/[54]

其它参考1


如果你想要一个非常简单的解决方案(整合时间不到5分钟)并且开箱即用,那么Clippy是一些比较复杂的解决方案的不错选择。


大眼夹[55]


它是由Github的联合创始人撰写的。示例Flash嵌入代码如下:


<object 
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed 
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>


请记住将#{text}替换为需要复制的文本,并将#{bgcolor}替换为颜色。

其它参考2


从网页读取和修改剪贴板会引起安全和隐私问题。但是,在Internet Explorer中,可以执行此操作。我找到了这个示例代码段:[56]




    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />



我最近写了一篇关于这个问题的技术博客文章(我在Lucidchart工作,我们最近在剪贴板上进行了大修)。[57]


将纯文本复制到剪贴板相对简单,假设您希望在系统复制事件期间执行此操作(用户按 Ctrl C 或使用浏览器的菜单)。


var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});


在系统复制事件期间不将文本放在剪贴板上要困难得多。看起来这些其他答案中的一些参考方法通过Flash来实现,这是唯一的跨浏览器方式(据我所知)。


除此之外,还有一些基于浏览器的选项。


这是IE中最简单的,您可以随时通过JavaScript访问clipboardData对象:


window.clipboardData


(但是,当您尝试在系统剪切,复制或粘贴事件之外执行此操作时,IE将提示用户授予Web应用程序剪贴板权限。)


在Chrome中,您可以创建Chrome扩展程序,为您提供剪贴板权限(这就是我们为Lucidchart所做的工作)。然后,对于安装了扩展程序的用户,您只需要自己解雇系统事件:[58]


document.execCommand('copy');


看起来Firefox有一些选项允许用户授予某些网站访问剪贴板的权限,但我还没有亲自试过这些。[59]

其它参考3


clipboard.js是一个小型的非Flash实用程序,它允许将文本或html数据复制到剪贴板。它非常容易使用,只需包含.js并使用类似的东西:[60]


<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>


clipboard.js也在GitHub上[61]

其它参考4


ZeroClipboard是我发现的最佳跨浏览器解决方案:


<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>


如果您需要iOS的非Flash支持,您只需添加一个后备:


clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  


http://zeroclipboard.org/[62]


https://github.com/zeroclipboard/ZeroClipboard[63]

其它参考5


这是我对那一个的看法..


function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input)
    return result;
 }

其它参考6


从我一直在研究的项目之一,利用Zero Clipboard库的jQuery复制到剪贴板插件。[64]


如果你是一个沉重的jQuery用户,它比原生的Zero Clipboard插件更容易使用。

其它参考7


我找到了以下解决方案:


在键向下处理程序上创建pre标记。我们将内容设置为复制到此标记,然后对此标记进行选择并在处理程序中返回true。这会调用chrome的标准处理程序并复制所选文本。


如果需要,可以设置恢复先前选择的功能超时。我在Mootools上的实现:


   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }


用法:


enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;


在粘贴时,它创建textarea并以相同的方式工作。


PS可能是这个解决方案可用于创建完全跨浏览器的解决方案,无需闪存。它适用于FF和Chrome。

其它参考8


其他方法将纯文本复制到剪贴板。要复制HTML(即,您可以将结果粘贴到WSIWYG编辑器中),您可以在 IE ONLY 中执行以下操作。这与其他方法根本不同,因为浏览器实际上可视地选择内容。


// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

其它参考9


由于最近Chrome 42+Firefox 41+现在支持 document.execCommand(copy)命令。因此,我使用Tim Down的旧答案和Google Developer的答案组合创建了一些跨浏览器复制到剪贴板功能的功能: [66]




function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE 
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } else if (window.getSelection && document.createRange) {
        // non-IE
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el) 

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    } else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press CTRL+C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
	but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
	versions of Chrome feature detection does not work!
	See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>



从Flash 10开始,如果操作源自用户与Flash对象的交互,则只能复制到剪贴板。 (阅读Adobe的Flash 10公告中的相关部分)[67]


解决方案是在Copy按钮上方过度使用flash对象,或者启动副本的任何元素。零剪贴板目前是具有此实现的最佳库。有经验的Flash开发人员可能只想创建自己的库。

其它参考10




  <!DOCTYPE html>

  <style>
    #t {
      width: 1px
      height: 1px
      border: none
    }
    #t:focus {
      outline: none
    }
  </style>

  <script>
    function copy(text) {
      var t = document.getElementById('t')
      t.innerHTML = text
      t.select()
      try {
        var successful = document.execCommand('copy')
        var msg = successful ? 'successfully' : 'unsuccessfully'
        console.log('text coppied ' + msg)
      } catch (err) {
        console.log('Unable to copy text')
      }
      t.innerHTML = ''
    }
  </script>

  <textarea id=t></textarea>

  <button onclick="copy('hello world')">
    Click me
  </button>



我找到了以下解决方案:


我将文本隐藏在输入中。因为setSelectionRange不能处理隐藏的输入,所以我暂时将类型更改为文本,复制文本然后再将其隐藏。如果要复制元素中的文本,可以将其传递给函数并将其内容保存在目标变量中。


    jQuery('#copy').on('click', function () {
        copyToClipboard();
    });

    function copyToClipboard() {
        var target = jQuery('#hidden_text');

        // make it visible, so can be focused
        target.attr('type', 'text');
        target.focus();
        // select all the text
        target[0].setSelectionRange(0, target.val().length);

        // copy the selection
        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            succeed = false;
        }

        // hide input again
        target.attr('type', 'hidden');

        return succeed;
    }

其它参考11


在IE以外的浏览器中,您需要使用小型Flash对象来操作剪贴板,例如



  • 自动复制到剪贴板


其它参考12


将HTML输入中的文本复制到剪贴板[68]



  


 
 function myFunction() {
  /* Get the text field */
   var copyText = document.getElementById("myInput");
 
   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");
 
   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }
 

 
 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">
 
 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
 



我把我认为最好的一个放在一起。



  • 使用cssText避免IE中的异常,而不是直接使用样式。

  • 如果有一个
  • ,则恢复选择
  • 设置只读,因此键盘不会出现在移动设备上

  • 有适用于iOS的解决方法,因此它实际上可以正常阻止execCommand。



这里是:


const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    } else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    } catch (err) {
      return false;
    }
  };
})();

其它参考13


从(像Excel这样的东西)和Excel的兼容性构建自定义网格编辑时遇到了同样的问题。我不得不支持选择多个单元格,复制和粘贴。


解决方案:创建一个textarea,您将插入数据供用户复制(对我来说,当用户选择单元格时),设置焦点(例如,当用户按 Ctrl )并选择全文。


因此,当用户点击 Ctrl + C 时,他会复制他选择的单元格。测试后只需将textarea调整为1像素(我没有测试它是否可以在显示器上工作:无)。它适用于所有浏览器,对用户来说是透明的。


粘贴 - 你可以这样做(你的目标不同) - 继续关注textarea并使用onpaste捕捉粘贴事件(在我的项目中,我使用单元格中的textareas进行编辑)。


我不能粘贴一个例子(商业项目),但你明白了。

其它参考14


我用过clipboard.js


我们可以在npm得到它


npm install clipboard --save


还有凉亭


bower install clipboard --save


用法&例子见https://zenorocha.github.io/clipboard.js/[66]

其它参考15


已经有很多答案,但我想添加一个(jQuery)。在任何浏览器上都可以像魅力一样工作,也可以在移动设备上工作(即提示有关安全性但是当你接受它时工作正常)。


function appCopyToClipBoard( sText )
{
 var oText = false,
     bResult = false;
 try
 {
  oText = document.createElement("textarea");
  $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
  oText.select();
  document.execCommand("Copy");
  bResult = true;
 } catch(e) {}

 $(oText).remove();
 return bResult;
}


在你的代码中:


if( !appCopyToClipBoard( 'Hai there! This is copied to the clipboard.' ))
 { alert('Sorry, copy to clipboard failed.'); }

其它参考16


这是@Chase的答案的扩展,其优点在于它适用于IMAGE和TABLE元素,而不仅仅是IE9上的DIV。


if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

其它参考17


我找到了另一个很好的解决方案LMCButton - 小动画flash跨浏览器按钮。一个JavaScript函数和swf按钮。简单的选项(标题,自定义JavaScript)。


链接:复制到剪贴板LMCButton [70]

其它参考18


我的错。这仅适用于IE。


这是另一种复制文本的方法:


<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

其它参考19


ng-clip是AngularJS最简单的解决方案。[71]

其它参考20


要将选定的文本(要复制的文本)复制到剪贴板,请创建一个Bookmarklet(执行Javsacript的浏览器书签)并执行它(单击它)。
它将创建一个临时文本区域。


Github的代码:


https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d[72]


(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');

其它参考21


我似乎误解了这个问题,但作为参考,你可以提取一系列DOM(不是剪贴板;与所有现代浏览器兼容),并将它与oncopy和onpaste以及onbeforepaste事件结合起来以获得剪贴板行为。这是实现此目的的代码:


function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

其它参考22


我必须从页面复制非输入框文本(任何div/span标记内的文本),并提供以下代码。唯一的技巧是拥有一个隐藏字段,但作为TEXT类型,不会使用隐藏类型。


    function copyToClipboard(sID) {
        var aField = document.getElementById("hiddenField");

        aField.hidden   = false;
        aField.value    = document.getElementById(sID).textContent;
        aField.select();
        document.execCommand("copy");
        alert("Following text has been copied to the clipboard.\n\n" + aField.value);
        aField.hidden = true;
    }


并在HTML中添加以下内容


input type =textid =hiddenFieldstyle =width:5px; border:0/>
...

其它参考23


我也想分享我的解决方案,这是其他答案之间的一个组合。


var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<input type="text" name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
        window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}


它使用jQuery,但它当然没有必要,你可以改变它,如果你想。我只是有jQuery我可以处理。你也可以添加一些CSS,以确保输入没有显示。例如:


.textToCopyInput{opacity: 0; position: absolute;}


或者当然,你也可以做一些内联样式


.append($('<input type="text" name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )