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

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

0 голосов
/ 07 июня 2018

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

И мои собственные варианты с использованием 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>

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

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

Вам необходимо знать две вещи.

  1. Вопреки предыдущему ответу, вы МОЖЕТЕ скопировать переменную строку вбуфер обмена, как показано в моем примере.
  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>
0 голосов
/ 07 июня 2018

Вы не можете копировать напрямую из строки, только из элемента 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");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...