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

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

我知道网页会立即保存和使用，因为我也会对按钮中的“点击此处”字母进行微不足道的更改，并且可以在刷新后看到差异。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 =＆＃39; text＆＃39; 的新临时元素，给定要复制到剪贴板的值，然后执行复制命令，然后删除该临时项目。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: