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

【问题标题】：Copy text to the clipboard with PHP and JavaScript?使用 PHP 和 JavaScript 将文本复制到剪贴板？
【发布时间】：2018-06-06 21:10:50
【问题描述】：

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

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

网页输出：

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

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

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

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

但结果是不会导致任何错误，也不会将任何内容复制到剪贴板。

我知道该网页正在立即保存和使用，因为我还对按钮中的字母“单击此处”进行了细微的更改，刷新后可以看到不同之处。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>

【问题讨论】：

您确定要公开这些电子邮件地址吗？
@GolezTrol 这些电子邮件地址代表虚构人物。参见洛基恐怖图片展。有效的关注虽然:)
@Flashdrive 值得关注，因为它是一个现有的域（实际上是 RHPS 粉丝俱乐部的），因此也可能是现有的电子邮件地址。如果这确实是那个网站的代码，那么这个问题也暴露了它使用的是旧版本的 PHP，不再有任何补丁，以及一段似乎容易受到 SQL 注入攻击的代码。我会做一个备份，只是为了确定。 ;-)
在那一行是 echo in span 它应该是 class="mono" 缺少引号
我刚刚编了邮件。

标签： javascript php html clipboard

【解决方案1】：

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

有两件事你需要知道。

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

这是我的例子。简要说明这是如何工作的：创建一个 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>

【讨论】：

此答案适用于 stackoverflow 的“运行代码片段”按钮。这个网站很酷，让你在这里测试它。但它和使用 javascript 变量的其他答案在我的系统上不起作用。我会用 javascript 版本回复你。我已经能够使用此代码将信息拉入警报窗口： var myText = document.getElementById("theList"); myText.value = ;警报（myText.value）； ----或---- var myText = document.getElementById("theList").innerHTML;警报（myText.value）；
你的意思是它根本不工作，还是只是它不能自动工作？不要忘记，这只有在用户直接导致它发生时才有效，例如通过按下按钮。由于浏览器安全限制，您无法自动运行它。
我的意思是当用户按下按钮时它不起作用@Brandon Dixon
我让它工作了。基本上你的答案是我用过的@Brandon Dixon。制作一个元素。把文字放进去。将元素附加到文档树。选择我的元素。复制到剪贴板。从文档树中删除元素。除了我添加了一个 myElement.focus();在选择我的元素之前调用，如stackoverflow.com/questions/400212/… 中所指定
缺少 .focus() 调用导致此错误：未捕获的 TypeError: myText.select is not a function

【解决方案2】：

您不能直接从字符串复制，只能从 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");
}

【讨论】：

“您不能直接从字符串复制，只能从 HTML 元素复制”不正确。我在回答中的示例表明这是可能的。
您的答案不会直接从字符串中复制，它会创建一个临时元素，设置其值，然后使用复制命令。我正在做同样的事情，除了元素在 HTML 中，而不是临时的。
是的，对不起，我相信我第一次读到你的陈述时误解了你的陈述，说你根本做不到。

【解决方案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() 函数，该函数随后会将隐藏输入的值（ID 为“链接到复制”）写入您的剪贴板导航器。

隐藏输入的值可以是任何你想要的，这里我使用的是 PHP 变量。然后，此 PHP 值将被复制到您的剪贴板。

【讨论】：

请分享更多细节，以便其他人可以从您的回答中学习。据我所知，您没有在答案中使用任何 PHP 生成的数据
@NicoHaase 是的，我是。看到隐藏输入的值了吗？
随时通过编辑为您的答案添加所有说明
@NicoHaase 好的，添加了解释。谢谢。