JavaScript中如何复制到剪贴板？

复制文本字段内的文本的最佳方法是使用navigator.clipboard.writeText。

<input type="text" value="Hello World" id="myId">
<button onclick="myFunction()" >Copy text</button>

<script>
function myFunction() {
  var copyText = document.getElementById("myId");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
}

</script>

将HTML输入框中的文本复制到剪贴板：

 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>

注意: document.execCommand() 方法在 Internet Explorer 9 及更早版本中不受支持。

来源: W3Schools - 复制文本到剪贴板

我曾经遇到过与Excel兼容的自定义网格编辑问题。我需要支持选择多个单元格、复制和粘贴。

解决方法：创建一个文本区域，用户可以将其中的数据复制（例如用户选择单元格时），将焦点设置在该文本区域上（例如当用户按下Ctrl键时）并选择整个文本。

因此，当用户按下Ctrl+C时，他/她将复制所选定的单元格。在测试后，只需将文本区域调整为一个像素的大小即可（我没有测试它是否可以在"display:none"情况下正常工作）。它能够在所有浏览器上良好地工作，并且对用户透明。

粘贴 - 您可以执行与此类似的操作（取决于您的目标）- 在文本区域上保持焦点并使用onpaste捕获粘贴事件（在我的项目中，我在单元格中使用文本区域进行编辑）。

我无法提供示例（商业项目），但是您已经了解了大致思路。

这是对Chase Seibert的答案的扩展，有一个优点是它可以在Internet Explorer 9中不仅适用于DIV元素，还适用于IMAGE和TABLE元素。

if (document.createRange) {
    // Internet Explorer 9 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 Firefox
} else {
    // Internet Explorer 8 and earlier. This stuff won't work
    // on Internet Explorer 9.
    // (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');
}

npm install clipboard --save

另外还有在Bower上的相关内容。

bower install clipboard --save

new ClipboardJS("#btn1");

document.querySelector("#btn2").addEventListener("click", () => document.querySelector("#btn1").dataset.clipboardText = Math.random());

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<button id="btn1" data-clipboard-text="Text to copy goes here">
    Copy to clipboard
</button>
<button id="btn2">Click here to change data-clipboard-text</button>

<br /><br />

<input type="text" placeholder="Paste here to see clipboard" />

对不起，这个只能在Internet Explorer中使用。

这里还有一种复制文本的方法：

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

<script type="text/javascript">
    $(document).ready(function() {

        $("#copy_btn_id").click(function(){

            $.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
                function(data){
                    // Copied successfully
                }, "html"
            );
        });

        $("#paste_btn_id").click(function() {

           $.post("<?php echo base_url();?>ajax/foo_paste/", null,
               function(data) {
                   $('#paste_btn_id').val(data);
               }, "html"
           );
        });
    });
</script>

HTML内容

<input type='text' id='copy_btn_id' onclick='this.select();'  value='myvalue' />
<input type='text' id='paste_btn_id' value='' />

PHP代码

<?php
    class Ajax extends CI_Controller {

        public function foo_copy($val){
            $this->session->set_userdata(array('clipboard_val' => $val));
        }

        public function foo_paste(){
            echo $this->session->userdata('clipboard_val');
            exit();
        }
    }
?>