Скопировать текст в буфер обмена с помощью PHP и JavaScript?

Question

Скопировать текст в буфер обмена с помощью PHP и JavaScript?

Я хочу добавить кнопку на существующей веб-странице, которая будет копировать текст в буфер обмена Windows.

Веб-страница и PHP в ней уже хорошо работают для создания и отображения текста следующим образом:

Вывод на веб-страницу:

'Abby Normal' <[email protected]>, 'Brad Majors' <[email protected]>, 'Frank N. Furter' <[email protected]>

Итак, теперь я хочу добавить функцию 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");

И мои собственные варианты с использованием PHP в Javascript:

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>

1

clipboard html javascript php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Вот рабочий пример, который я сделал:

Есть две вещи, которые вам нужно знать.

Вопреки предыдущему ответу, вы МОЖЕТЕ скопировать переменную строку в буфер обмена, как показано в моем примере.
Пользователь ДОЛЖЕН ИСКЛЮЧИТЕЛЬНО предпринять действие, которое вызывает функцию копирования. Если он вызывается автоматически, копия будет отклонена. Скорее всего, это причина вашей проблемы.

Вот мой пример. Чтобы кратко объяснить, как это работает: новый временный элемент типа тип ввода = ‘текст’ создается с заданным значением для копирования в буфер обмена, затем выполняется команда копирования, затем этот временный элемент удаляется.

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>

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

1

Источник