Не удается получить доступ к тексту, скопированному в буфер обмена

Question

Я пытаюсь написать простой скрипт, который позволяет пользователям копировать текущий URL страницы в буфер обмена.Моя проблема в том, что если любой другой текст копируется в буфер обмена, т.е. пользователь выделяет некоторый текст на странице с помощью Ctrl + C / Ctrl + V, исходный текст (URL страницы) исчезает / заменяется тем, что было скопировано последним.

Это мой код

HTML

<ul class="list-inline">
 <li class="list-inline">....</li>
 <li class="list-inline">....</li>
 <li class="list-inline-item"><a class="btn btn-default" href="#" title="Copy link to Clipboard" id="copyURL"><i class="fas fa-link"></i> <span id="copyURLText">Copy URL</span></a></li>
</ul>

jQuery

$('#copyURL').click(function(event){
  event.preventDefault();

  //temporarily change text in link span
  $('#copyURLText').text('Copied');

  setTimeout(function(){
   $('#copyURLText').text('Copy URL');
  }, 1500);

  //create text area and input value
  var tempContainer = $('<textarea></textarea>');
  tempContainer.val(window.location.href.replace(/\#/gi, ''));

  //set attributes and position outside the screen
  tempContainer.attr('readonly', true);
  tempContainer.css({
   'position': 'absolute',
   'left': '-9999px',
   'top': '0px'
  })

  //append to body
  $('body').append(tempContainer);

  //select element, copy text then remove
  tempContainer.select();
  document.execCommand('copy');
  tempContainer.remove();
})

CSS

textarea{
 display: none;
}

Answer 1

Проблема, с которой вы сталкиваетесь, связана с тем, как браузеры воспринимают запись в буфер обмена как то, что пользователь умышленно делает.Для успешного вызова execCommand("copy") необходимо выполнить два критерия:

1. execCommand("copy") должен быть вызван из события, инициируемого пользователем, которое вы выполняете.Функция вызывается из обработчика события щелчка, так что все хорошо.
2. Копируемый элемент должен иметь возможность взаимодействия с пользователем.В настоящее время ваш CSS скрывает этот элемент, поэтому современные браузеры (и, возможно, также более старые) не позволяют записывать содержимое в буфер обмена, поскольку пользователь не может разумно скопировать текст из скрытого поля.

Если вы удалите display:none из текстовой области, текст должен успешно скопироваться в буфер обмена.Атрибутов, которые вы применяете к текстовой области, достаточно, чтобы ввод технически был видимым с точки зрения проверки браузера, но не мерцал в глазах пользователя во время выполнения действия.