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管理订单页面？

1 个答案: