如何将剪贴板按钮添加到 WooCommerce 管理订单页面？答案

【问题标题】：How to add clipboard button to WooCommerce admin order page?如何将剪贴板按钮添加到 WooCommerce 管理订单页面？
【发布时间】：2019-08-28 21:01:30
【问题描述】：

我想创建一个按钮，当我单击它时，文本会复制到我的桌面剪贴板。我希望此按钮位于客户的订单页面上，与列出客户订单详细信息的位置相同。这个想法是创建一些按钮，让我可以复制一些不同的预定文本。通过客户服务与客户的电子邮件，有人知道将其写入哪个文件吗？

【问题讨论】：

在下面发布了我的答案。您还可以使用 jQuery 或 JavaScript 从页面中读取一些值。我不知道您的确切用例，因为您没有添加任何代码。
它对你有用吗？

标签： wordpress woocommerce woothemes

【解决方案1】：

这里有一个 JS 函数。这将复制任何传递给第一个 let 变量的参数。你可以随意修改：

function copyToClipboard() {
    let textToCopy      = "I want to get copied into my clipboard",
        urlInput = document.createElement( "input" );
    document.body.appendChild( urlInput );
    urlInput.setAttribute( "value", textToCopy );
    if ( navigator.userAgent.match( /ipad|ipod|iphone/i ) ) {
        let contentEditable      = urlInput.contentEditable,
            readOnly             = urlInput.readOnly,
            range                = document.createRange(),
            windowSelection      = window.getSelection();
        urlInput.contentEditable = !0;
        urlInput.readOnly        = !1;
        range.selectNodeContents( urlInput );
        windowSelection.removeAllRanges();
        windowSelection.addRange( range );
        urlInput.setSelectionRange( 0, 999999 );
        urlInput.contentEditable = contentEditable;
        urlInput.readOnly        = readOnly
    } else urlInput.select();
    document.execCommand( "copy" );
    document.body.removeChild( urlInput );
    alert( "Successfully copied to clipboard" );
}

您可以通过按钮调用它，例如：

<button onclick="copyToClipboard()">Copy to clipboard</button>

另外，您可以将参数传递给函数：

<button onclick="copyToClipboard('I want to get copied into my clipboard')">Copy to clipboard</button>

在这种情况下，你需要这样修改你的 JS 函数的顶部：

function copyToClipboard(textToCopy) {

您还需要删除变量textToCopy 的重新定义。否则它将覆盖传递给函数的值。

【讨论】：