经典复制到剪贴板是否一定需要输入field/text区域字段？

Question

我不得不将锚标记内的一段文本复制到剪贴板。按照网上的建议我做了
HTML:

          <div class="organizer-link">
         <i class="fa fa-link" id="copylink"></i>
         <a href="#" id="linktocopy">https://ticketnshop.com/events/124</a>
          </div>

JS:

 $("#copylink").click(function () {
         console.log("copy link clicked");
         $('#linktocopy').focus();
         $('#linktocopy').text().select();
         document.execCommand("copy");
        console.log($('#linktocopy').val());

    });

但是没有用。

但后来我用文本字段替换了锚标记，文本被复制了。

此过程是否严格要求 textarea/input 字段。如果不是我做错了什么？

Answer 1

您使用的 select() 方法仅限于 <input type="text"> 个字段和 <textarea> 个框。

查看此处了解更多信息select method jquery

Answer 2

您不能使用 select()，因为您没有关注文本字段（也不是文本区域）。

这是一个使用范围选择的工作示例。也许你也应该看看 clipboard.js。

$(document).ready(function() {
  $("#copylink").click(function() {
    var containerid = "linktocopy";
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById(containerid));
      range.select().createTextRange();
      document.execCommand("copy");
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(document.getElementById(containerid));
      window.getSelection().removeAllRanges(range);
      window.getSelection().addRange(range);
      document.execCommand("copy");
      console.log("text copied");
    }
  });
});

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="organizer-link">
  <i class="fa fa-link" id="copylink"></i>
  <a href="#" id="linktocopy">https://ticketnshop.com/events/124</a>
</div>

Answer 3

function copyToClipboard() {
  let textLink = document.getElementById('text');
  let textRange = document.createRange();

  textRange.selectNode(textLink);
  window.getSelection().removeAllRanges(textRange);
  window.getSelection().addRange(textRange);

  document.execCommand("Copy");

  console.log('text was copied!');
}

<div>
  <button id="copy" onclick="copyToClipboard()">Copy</button>
  <a id="text">Copied text from the tag "A"</a>
  <textarea placeholder="Paste this copied text"></textarea>
</div>

经典复制到剪贴板是否一定需要输入field/text区域字段？

Does the classic copy to clipboard need input field/text area field necessarily?

javascript

clipboard

jquery

copy