Как скопировать в буфер обмена текст из тегов <code>и <pre>, используя Jquery и JS?

Question

Согласно веб-документации MDN

Метод HTMLInputElement.select () выбирает весь текст в элементе или в элементе, который включает текстовое поле.

Это означает, что .select() не работает с элементами, отличными от input и textarea. В моем случае у меня есть несколько строк в code и pre, которые я хотел бы, чтобы пользователь нажал кнопку копирования, чтобы скопировать текст внутри, но в соответствии с определением выше, это не работает.

$(document).ready(function() {
  $('code, pre').append('<span class="command-copy" ><i class="fa fa-clipboard" aria-hidden="true"></i></span>');

  $('code span.command-copy').click(function(e) {
    text = $(this).parent().select(); //.text();
    copiedText = $.trim(text);
    document.execCommand("copy");
  });


  $('pre span.command-copy').click(function(e) {
    text = $(this).parent().parent().select(); //.text();
    copiedText = $.trim(text);
    document.execCommand("copy");
  });
})

code,
pre {
  position: relative;
}

code,
pre {
  display: block;
  padding: 20px;
  background: #f2f2f2;
  color: #555755;
}

span.command-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: .6;
  font-size: 20px;
  color: #555755;
}

span.command-copy:hover {
  cursor: pointer;
}

  Steps to install pytest


  Step 1: Open the terminal and type in this command:



        pip install pytest 

Or you can upgrade your existing:
  

    pip install --upgrade pytest

Могу ли я как-то обойти это? Спасибо

Answer 1

Вот как вы можете скопировать в буфер обмена свой текст при событии щелчка, добавив некоторый java -скрипт к существующему коду.

.select () не будет работать в вашем случай, потому что он ТОЛЬКО выбирает текст, но не копирует его, что в вашем случае вам также нужно щелкнуть, чтобы скопировать и вставить.

Добавлено несколько вещей:

1. Вам нужно создать элемент в body и скопировать в него текстовое значение
2. document.execCommand('copy'); будет это значение из ввода
3. После успешного копирования оно удалит входное значение из DOM

Запустите приведенный ниже фрагмент, чтобы убедиться, что он работает.

$(document).ready(function() {
  $('code, pre').append('<span class="command-copy" ><i class="fa fa-clipboard" aria-hidden="true"></i></span>');

  $('code span.command-copy').click(function(e) {
    var text = $(this).parent().text().trim(); //.text();
    var copyHex = document.createElement('input');
    copyHex.value = text
    document.body.appendChild(copyHex);
    copyHex.select();
    document.execCommand('copy');
    console.log(copyHex.value)
    document.body.removeChild(copyHex);
  });


  $('pre span.command-copy').click(function(e) {
    var text = $(this).parent().text().trim();
    var copyHex = document.createElement('input');
    copyHex.value = text
    document.body.appendChild(copyHex);
    copyHex.select();
    document.execCommand('copy');
    console.log(copyHex.value)
    document.body.removeChild(copyHex);
  });
})

code,
pre {
  position: relative;
}

code,
pre {
  display: block;
  padding: 20px;
  background: #f2f2f2;
  color: #555755;
}

span.command-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: .6;
  font-size: 20px;
  color: #555755;
}

span.command-copy:hover {
  cursor: pointer;
}

  Steps to install pytest


  Step 1: Open the terminal and type in this command:



        pip install pytest 

Or you can upgrade your existing:
  

    pip install --upgrade pytest