使用 PHP 和 JavaScript 将文本复制到剪贴板？

Question

我想在现有网页上添加一个按钮，用于将文本复制到 Windows 剪贴板。

该网页和其中的 PHP 已经可以很好地创建和显示如下文本：

网页输出：

'Abby Normal' <abnormal@rockyhorror.com>, 'Brad Majors' <bm@rockyhorror.com>, 'Frank N. Furter' <franknfurter@rockyhorror.com>

所以现在我想添加一个 Javascript 函数和一个调用该函数的 html 按钮以将该输出复制到 Windows 剪贴板。

问题：按下按钮时没有复制任何内容。我究竟做错了什么？提前谢谢你。

<?PHP
  session_start();
  include('include/_initsess.php');
  include('include/_setdb.php');
  if(!isset($_SESSION['userlist'])) exit;
  $users = $_SESSION['userlist'];
  $emails = '';
  $qry = "SELECT FIRST,LAST,EMAIL FROM users WHERE PKEY IN ($users)";
  $result  = mysql_query($qry);     
  $numrows = mysql_num_rows($result);   
  for ($m=0; $m<$numrows; $m++) {
    $row = mysql_fetch_array($result); 
    list($fn,$ln,$em) = $row;
    $emails .= ($m==0) ? "'".$fn." ".$ln."' &lt;".$em."&gt;" : (", '".$fn." ".$ln."' &lt;".$em."&gt;");
    } // end for
?>

<html>
<head>
</head>
<body>
<span class=mono id="theList" value="<?php echo $emails; ?>">
  <?PHP echo($emails); ?>
</span>

<script>
function copyToClipboardWithJavascript() {
  /* Get the text field */
  var copyText = document.getElementById("theList");
  /* Select the text field */
  copyText.select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
}
</script>

<button onclick="copyToClipboardWithJavascript()">Click here</button>

</span>
</body>
</html>

我已经尝试了 Javascript 教程建议的方法：

var copyText = = document.getElementById("theList");

我自己的变体在 Javascript 中使用 PHP:

var copyText = <?PHP echo($emails); ?>;
var copyText = `<?PHP echo($emails); ?>`;
var copyText = "<?PHP echo($emails); ?>";
var copyText = '<?PHP echo($emails); ?>';

但结果是没有任何错误，也没有任何内容被复制到剪贴板。

我知道该网页正在立即保存和使用，因为我也对按钮中的字母'Click here'进行了细微的更改，刷新后可以看到差异。enter code here

***更新我使用的答案：****

<span class=mono id="theList">
<?PHP echo($emails); ?>
</span>
<button id="copyButton" onclick="myCopyFunction()">Copy email address list to clipboard.</button>
<script>
function myCopyFunction() {
  var myText = document.createElement("textarea")
  myText.value = document.getElementById("theList").innerHTML;
  myText.value = myText.value.replace(/&lt;/g,"<");
  myText.value = myText.value.replace(/&gt;/g,">");
  document.body.appendChild(myText)
  myText.focus();
  myText.select();
  document.execCommand('copy');
  document.body.removeChild(myText);
}
</script>

Answer 1

您不能直接从字符串复制，只能从 HTML 元素复制。您需要将 PHP 字符串放入元素的值中。

function copyToClipboardWithJavascript() {
  /* Get the text field */
  var copyText = document.getElementById("theList");
  /* Put emails into the text field */
  copyText.value = <?php echo json_encode($emails); ?>;
  /* Select the text field */
  copyText.select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
}

Answer 2

这是我制作的一个工作示例：

有两件事你需要知道。

与之前的答案相反，您实际上可以将变量字符串复制到剪贴板，如我的示例所示。
用户必须明确采取导致调用复制功能的操作。如果自动调用，复制将被拒绝。这很可能是您遇到问题的原因。

这是我的例子。简单解释一下这是如何工作的：创建一个新的类型为 input type='text' 的临时元素，将值复制到剪贴板，然后执行复制命令，然后删除该临时项目。

copyToClipboard(document.getElementById("content"));

document.getElementById("clickCopy").onclick = function() {
 copyToClipboard(document.getElementById("goodContent"));
}

document.getElementById("clickCopyString").onclick = function() {
 copyToClipboard("This is a variable string");
}

/**
* This will copy the innerHTML of an element to the clipboard
* @param element reference OR string
*/
function copyToClipboard(e) {
    var tempItem = document.createElement('input');

    tempItem.setAttribute('type','text');
    tempItem.setAttribute('display','none');
    
    let content = e;
    if (e instanceof HTMLElement) {
      content = e.innerHTML;
    }
    
    tempItem.setAttribute('value',content);
    document.body.appendChild(tempItem);
    
    tempItem.select();
    document.execCommand('Copy');

    tempItem.parentElement.removeChild(tempItem);
}

div {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
}

<div id="content">
This is example text which will NOT be copied to the clipboard.
</div>
<div id="goodContent">
This WILL be copied to the cliboard when you push the button below:
</div>
<button id="clickCopy">
Copy Text from 2nd
</button>

<button id="clickCopyString">
Copy STRING to Clibpoard from Variable
</button>

Answer 3

这个简单的解决方案可能适合您。这是我用的。随着 jQuery.

function copy() {
  navigator.clipboard.writeText($('#link-to-copy').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span onclick="copy();">
  Copy link
</span>

<input type="hidden" id="link-to-copy" value="<?= $link_copy ?>">

当你点击“Copy link”span 元素时，它会调用 copy() 函数，然后将隐藏输入（id 为 'link-to-copy'）的值写入导航器的剪贴板。

隐藏输入的值可以随便取，这里我用的是PHP变量。此 PHP 值随后将被复制到您的剪贴板。

使用 PHP 和 JavaScript 将文本复制到剪贴板？

Copy text to the clipboard with PHP and JavaScript?

html

javascript

php

clipboard