Нужно ли классическому копированию в буфер обмена поле ввода / поле текстовой области? - PullRequest
Новая
       33

Нужно ли классическому копированию в буфер обмена поле ввода / поле текстовой области?

0 голосов
/ 01 февраля 2019

Мне пришлось скопировать часть текста внутри тега привязки в буфер обмена.Как и предлагалось в интернете, я сделал
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());

    });

Но это не сработало.

Но затем я заменил тег привязки на текстовое поле, и текст был скопирован.

Строго ли для этого процесса требуется поле ввода / ввода текста.Если нет, то что я сделал не так?

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Вы не можете использовать 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>
0 голосов
/ 01 февраля 2019 

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>
0 голосов
/ 01 февраля 2019

ваш метод select (), который ограничен <input type="text"> полями и <textarea> полями.

для получения дополнительной информации смотрите выберите метод jquery

...