Копирование Javascript в буфер обмена работает только при наличии точки останова - PullRequest
Новая
       46

Копирование Javascript в буфер обмена работает только при наличии точки останова

0 голосов
/ 13 декабря 2018

У меня есть эта функция, которая вызывается, когда я нажимаю кнопку: 

function copyCredentials(elementId) {
  var el = document.createElement('textarea');
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);

  el.value = document.getElementById(elementId).innerHTML;

  var selected = document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
  el.select();
  document.execCommand('copy');
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
}

Этот код работает, только если я поставил точку останова.При обычном использовании он ничего не копирует ... В чем тут подвох?

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Ваш код работает просто отлично.Я не удалил ни одного вашего кода, я не знаю, что вы пытаетесь сделать, но вам, вероятно, это нужно для чего-то.Важно подчеркнуть, что код буфера обмена должен выполняться после того, как пользователь предпримет какое-либо действие (например, нажатие кнопки), это мера, позволяющая избежать троллинга / повышения безопасности. 

function copyCredentials(elementId) {
  var el = document.createElement('textarea');
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);

  // note that you need to get .value instead
  // of .innerHTML if target is input type
  el.value = document.getElementById(elementId).innerHTML;

  var selected = document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
           
  el.select();
  // returns boolean
  var successfulCopy = document.execCommand('copy');
  
  if (!successfulCopy) {
    alert('Something went wrong or no browser support!').
    return;
  }

  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
}

document.getElementById('button').addEventListener('click', e => {
  copyCredentials('text');
});
<b>Text to paste:</b>
<div id="text">
  Hello World
</div>

<br />
<br />

<button id="button">Copy</button> <br />

<div>
  <b>Paste here:</b> <br />
  <textarea id="output" rows="10" cols="50"></textarea>
</div>
0 голосов
/ 13 декабря 2018

Я попробовал другой подход.Вместо создания нового элемента я извлекаю текст из исходного элемента (обратите внимание, что это содержимое тега <code> внутри тега <pre>): 

function copyCredentials(elementId) {
  var range;
  var selection;
  var el = document.getElementById(elementId);

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(el);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(el);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.execCommand('copy');
  if (selection) {
    selection.removeRange(range);
  }
}

И это работает!!!: -D

0 голосов
/ 13 декабря 2018

Можете ли вы попробовать эту функцию для копирования значения из textarea? 

function copyCredentials(elementId) {
  const value = document.getElementById('textarea_id').value;
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('value', value);
  document.body.appendChild(hiddenInput);
  hiddenInput.select();
  document.execCommand('copy');
  document.body.removeChild(hiddenInput);
}
<textarea id="textarea_id"></textarea>

<button onclick="copyCredentials()">CLICK</button>

Ps.Я удалил rangeCounts, потому что я не уверен, зачем они тебе нужны.В чем причина?

...