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

Question

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

Answer 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。否则它会覆盖传递给函数的值。

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

How to add clipboard button to WooCommerce admin order page?

wordpress

woocommerce

woothemes