如何在 JavaScript 中复制到剪贴板？

Question

如何将文本复制到剪贴板（多浏览器）？

相关：Trello 如何访问用户的剪贴板？< /em>

Answer 1

概述

用于复制到剪贴板的主要浏览器 API 包括三个：

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

   • Chrome 66（2018 年 3 月）中提供了以文本为中心的部分
   • 访问是异步的，并使用JavaScript Promises，可以编写为安全用户提示（如果显示）不会中断页面​​中的 JavaScript。
   • 文本可以直接从变量复制到剪贴板。
   • 仅在通过 HTTPS 提供服务的页面上受支持。
   • 在 Chrome 66 页面中，非活动标签页可以在没有权限提示的情况下写入剪贴板。

2. document.execCommand('copy') (已弃用）

Answer 2

自动复制到剪贴板可能很危险，因此大多数浏览器（Internet Explorer 除外）都使其变得非常困难。就我个人而言，我使用以下简单的技巧：

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

向用户显示提示框，其中已选择要复制的文本。现在按 Ctrl+C 和 Enter（关闭该框）就足够了 - 瞧！

现在，剪贴板复制操作是安全的，因为用户手动执行此操作（但以非常简单的方式）。当然，它适用于所有浏览器。

<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>

Answer 3

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

• 创建一个文本区域并将其内容设置为要复制到剪贴板的文本。
• 将文本区域附加到 DOM。
• 选择文本区域中的文本。
• 调用 document.execCommand("copy")
• 从 dom 中删除 textarea。

注意：您将看不到文本区域，因为它是在 Javascript 代码的同一同步调用中添加和删除的。

如果您自己实现此操作，需要注意一些事项：

• 出于安全原因，只能从事件处理程序（例如单击）调用此操作（就像打开窗口一样）。
• 首次更新剪贴板时，Internet Explorer 将显示权限对话框。
• 当文本区域聚焦时，Internet Explorer 和 Edge 将滚动。
• execCommand() 在某些情况下可能会抛出异常。
• 除非您使用文本区域，否则换行符和制表符可能会被吞掉。 （大多数文章似乎建议使用 div）
• 当显示 Internet Explorer 对话框时，文本区域将可见，您需要隐藏它，或者使用 Internet Explorer 特定的剪贴板数据 API。
• 在 Internet Explorer 中，系统管理员可以禁用剪贴板 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 Internet Explorer 10+.
// Internet Explorer: 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) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.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 Microsoft 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 prompt("Copy to clipboard: Ctrl+C, Enter", text);
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Answer 4

这是我对此的看法...

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;
 }

@korayem：请注意，使用 html input 字段不会考虑换行符 \n 并将任何文本展平为单行。

正如 @nikksan 在评论中提到的，使用 textarea 将解决该问题，如下所示：

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

Answer 5

从网页读取和修改剪贴板会引起安全和隐私问题。但是，在 Internet Explorer 中，可以做到这一点。我找到了这个示例片段：

    <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" />

Answer 6

如果您想要一个非常简单的解决方案（集成时间不到 5 分钟）并且开箱即用，那么 Clippy 是一些更复杂的解决方案的一个很好的替代方案。

它是由 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} 替换为颜色。

Answer 7

我最近写了一篇技术博客文章< /a> 就这个问题（我在 Lucidchart 工作，我们最近对剪贴板进行了彻底检查）。

将纯文本复制到剪贴板相对简单，假设您尝试在系统复制事件期间执行此操作（用户按 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 来完成此操作的方法，这是唯一的跨浏览器方法（据我所知）。

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

这是 Internet Explorer 中最简单的，您可以随时从 JavaScript 通过以下方式访问 ClipboardData 对象：（

window.clipboardData

当您尝试在系统剪切、复制或粘贴事件之外执行此操作时，Internet Explorer 将提示用户授予 Web 应用程序剪贴板权限。）

在 Chrome 中，您可以创建一个 Chrome 扩展程序，该扩展程序将为您提供 剪贴板权限（这就是我们为 Lucidchart 所做的）。然后，对于安装了您的扩展的用户，您只需要自己触发系统事件：

document.execCommand('copy');

看起来 Firefox 有 一些选项 允许用户授予某些网站访问剪贴板的权限，但我个人还没有尝试过这些。

Answer 8

我喜欢这一点：

<input onclick="this.select();" type='text' value='copy me' />

如果用户不知道如何在操作系统中复制文本，那么他们很可能也不知道如何粘贴。所以只需让它自动选择，剩下的交给用户。

Answer 9

clipboard.js 是一个小型的非 Flash 实用程序，允许复制文本或 HTML数据到剪贴板。它非常容易使用，只需包含 .js 并使用如下内容即可：

<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< /a>.

注意：此功能现已弃用。迁移到此处。

Answer 10

我非常成功地使用了它（没有 jQuery 或任何其他框架）。

function copyToClp(txt){
    var m = document;
    txt = m.createTextNode(txt);
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

警告

制表符会转换为空格（至少在 Chrome 中）。

Answer 11

在 2018 年，你可以这样做：

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

它在我的 Angular 6+ 代码中使用如下：

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

如果我传入一个字符串，它会复制它。如果没有，它会复制页面的 URL。

还可以对剪贴板进行更多的练习。请在此处查看更多信息：

取消阻止剪贴板访问

Answer 12

JavaScript/TypeScript 中最好、最简单的方法是使用此命令，

navigator.clipboard.writeText(textExample);

只需将要复制到 textExample 中的剪贴板的值传递给您即可

Answer 13

我不愿意对此添加另一个答案，但为了帮助像我这样的菜鸟，而且因为这是我会的 Google 最高结果。

2022 年，要将文本复制到剪贴板，您可以使用一行。

navigator.clipboard.writeText(textToCopy);

这将返回一个 Promise，如果复制则解决该 Promise，如果失败则拒绝。

完整的工作功能是这样的：

async function copyTextToClipboard(textToCopy) {
    try {
        await navigator.clipboard.writeText(textToCopy);
        console.log('copied to clipboard')
    } catch (error) {
        console.log('failed to copy to clipboard. error=' + error);
    }
}

警告！ 如果您在测试时打开了 Chrome 开发工具，它将失败，因为浏览器要启用剪贴板，需要您将窗口置于焦点中。这是为了防止随机网站在您不想要的情况下更改您的剪贴板。开发工具抢走了这个焦点，因此靠近开发工具，您的测试就会起作用。

如果您想将其他内容（图像等）复制到剪贴板，请查看这些文档。

https://developer.mozilla.org/en-US/docs/Web /API/Clipboard_API

这在浏览器中得到了很好的支持，您可以使用它。如果您担心 Firefox，请使用权限查询来显示或隐藏按钮（如果浏览器支持）。 https://developer.mozilla.org/en-US/docs /Web/API/权限/查询

Answer 14

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/

https://github.com/zeroclipboard/ZeroClipboard

Answer 15

由于 Chrome 42+ 和 Firefox 41+ 现在支持 document.execCommand('copy') 命令，我使用 < 的组合创建了几个用于跨浏览器复制到剪贴板功能的函数a href="https://stackoverflow.com/a/8024509/4307527">Tim Down 的旧答案 和 Google 开发者的回答：

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // Internet Explorer
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    }
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        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 Internet Explorer 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>

Answer 16

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

• 使用 cssText 来避免 Internet Explorer 中的异常，而不是直接使用样式。
• 如果有一个则恢复选择设置
• 为只读，因此键盘不会在移动设备上出现
• 有针对 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 programmatic 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) {
      console.error(err);
      return false;
    }
  };
})();

用法：copyToClipboard('some text')

Answer 17

其他方法将纯文本复制到剪贴板。要复制 HTML（即，您可以将结果粘贴到所见即所得编辑器中），您可以仅在 Internet Explorer 中执行以下操作。这与其他方法有根本的不同，因为浏览器实际上是可见地选择内容的。

// 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();

Answer 18

我找到了以下解决方案：

按键处理程序创建一个“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 did 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('Failed to paste. :(');
    };
}

用法：

enyby_clip = new EnybyClipboard(); // Init

enyby_clip.copyText('some_text'); // Place this in the 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;

在粘贴时，它会创建一个文本区域并以相同的方式工作。

PS：也许这个解决方案可以用于创建一个完整的跨浏览器解决方案，无需 Flash。它适用于 Firefox 和 Chrome。

Answer 19

此代码于 2021 年 5 月进行了测试。适用于 Chrome、IE、Edge。下面的“message”参数是您要复制的字符串值。

<script type="text/javascript">
    function copyToClipboard(message) {
        var textArea = document.createElement("textarea");
        textArea.value = message;
        textArea.style.opacity = "0"; 
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();


        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Copying text command was ' + msg);
        } catch (err) {
            alert('Unable to copy value , error : ' + err.message);
        }

        document.body.removeChild(textArea);
    }

</script>

Answer 20

使用最新的 Clipboard API 即可立即生效用户交互：

copy.addEventListener("pointerdown", () => navigator.clipboard.writeText("Hello World!"))

<button id="copy">Copy Hello World!</button>

Answer 21

将文本从 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>

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

来源：< a href="https://www.w3schools.com/howto/howto_js_copy_clipboard.asp" rel="nofollow noreferrer">W3Schools - 将文本复制到剪贴板

Answer 22

复制文本字段内文本的最佳方法。
使用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>

Answer 23

我在从（类似 Excel 的东西）构建自定义网格编辑以及与 Excel 的兼容性时遇到了同样的问题。我必须支持选择多个单元格、复制和粘贴。

解决方案：创建一个文本区域，您将在其中插入数据以供用户复制（对我来说，当用户选择单元格时），将焦点置于其上（例如，当用户按 Ctrl 时）并选择全文。

因此，当用户按下 Ctrl+C 时，他/她会复制他/她选择的单元格。经过测试后，只需将文本区域大小调整为一个像素（我没有测试它是否可以在显示上工作：无）。它在所有浏览器上都能很好地工作，并且对用户是透明的。

粘贴 - 你可以像这样做同样的事情（根据你的目标而不同） - 专注于文本区域并使用 onpaste 捕获粘贴事件（在我的项目中，我在单元格中使用文本区域进行编辑）。

我无法粘贴示例（商业项目），但你明白了。

Answer 24

这是Chase Seibert 的答案的扩展，优点是它适用于 IMAGE 和 TABLE 元素，而不仅仅是 Internet Explorer 9 上的 DIV。

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');
}

Answer 25

我使用过clipboard.js。

我们可以在 npm 上获取它：

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/[email protected]/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" />

更多使用和示例位于 https://zenorocha.github.io/clipboard.js/。

Answer 26

我的不好。这仅适用于 Internet Explorer。

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

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

Answer 27

这是同一网站的简单基于 Ajax/会话的剪贴板。

请注意，必须启用会话并且必须启用该会话。有效，并且该解决方案适用于同一站点。我在 CodeIgniter 上测试了它，但遇到了 session/Ajax 问题，但是 this< /a> 也解决了这个问题。如果您不想使用会话，请使用数据库表。

JavaScript/jQuery

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