Home / Questions / 621
Accepted
Alvaro Montoro
Asked: 2020-12-08 08:25:37 +0800 CST 2020-12-08 08:25:37 +0800 CST

Скопируйте содержимое элемента в буфер обмена с помощью JavaScript

  • 772

Как я могу скопировать содержимое div(или любого элемента) в буфер обмена, используя только JavaScript/jQuery без использования Flash?

Например, если у меня есть этот код:

<p id="mi_parrafo">
  Texto que quiero copiar
</p>
<button>Copiar al portapapeles</button>

Что мне сделать, чтобы после нажатия кнопки, когда я нажимаю Ctr+ V, содержимое вставлялось внутри метки, отмеченной как #mi_parrafo?

javascript

4 Answers

  1. Best Answer

    Есть по крайней мере один способ добиться этого без использования Flash: использование файлаcopy . Эта команда скопирует в буфер обмена текст, выделенный на странице во время ее выполнения.

    Итак, вы можете создать небольшую функцию, которая:

    1. Создайте временное текстовое поле (которое не будет видно).
    2. Назначьте содержимое копируемого элемента значению текстового поля.
    3. Выберите содержимое текстового поля.
    4. Запустите команду copy document.execCommand("copy"):.
    5. Уничтожить/Очистить временное поле.

    Тогда содержимое выбранного элемента окажется в буфере обмена. Код будет таким:

    function copiarAlPortapapeles(id_elemento) {

  // Crea un campo de texto "oculto"
  var aux = document.createElement("input");

  // Asigna el contenido del elemento especificado al valor del campo
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);

  // Añade el campo a la página
  document.body.appendChild(aux);

  // Selecciona el contenido del campo
  aux.select();

  // Copia el texto seleccionado
  document.execCommand("copy");

  // Elimina el campo de la página
  document.body.removeChild(aux);

}

    Основная проблема этого решения в том, что не все браузеры поддерживают эту команду , хотя ее можно использовать в основных из:

    • Хром 43
    • интернет эксплорер 10
    • Фаерфокс 41

    Рабочая демонстрация кода:

    function copiarAlPortapapeles(id_elemento) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
    <p id="p1">P1: Soy el primer párrafo</p>
<p id="p2">P2: Soy el segundo párrafo</p>
<button onclick="copiarAlPortapapeles('p1')">Copiar P1</button>
<button onclick="copiarAlPortapapeles('p2')">Copiar P2</button>
<br/><br/>
<input type="text" placeholder="Pega aquí para probar" />

    Эквивалентную версию также можно создать с помощью jQuery:

    function copyToClipboard(elemento) {
  var $temp = $("<input>")
  $("body").append($temp);
  $temp.val($(elemento).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">P1: Soy el primer párrafo</p>
<p id="p2">P2: Soy el segundo párrafo</p>
<button onclick="copyToClipboard('#p1')">Copiar P1</button>
<button onclick="copyToClipboard('#p2')">Copiar P2</button>
<br/>
<br/>
<input type="text" placeholder="Pega aquí para probar" />

    Это работает аналогично приведенному выше примеру, хотя сообщалось о некоторых ошибках в Safari для Mac и 64-разрядной версии Chrome (дополнительные сведения см. В комментариях к исходной ссылке).

    Источник: оригинальный ответ на сайте StackOverflow .

    РАСШИРЕНИЕ: КОПИРОВАТЬ, СОХРАНЯЯ СТИЛИ

    В другом вопросе о StackOverflow на испанском языке пользователь отметил, что форматирование/стили текста не были скопированы. Это связано с тем, что в приведенном выше коде он используется input textдля копирования содержимого элемента, поэтому код HTML «теряется» (он интерпретируется буквально, а не как HTML). Если вместо использования inputиспользовать divредактируемый, форматирование не потеряется и может быть скопировано/вставлено со стилями:

    function ejecutar(idelemento){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(idelemento).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
    #destino {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
    <p id="demo"><b>Caso con formato.</b></p>
<button onclick="ejecutar('demo')">Copiar</button> 
<br/>
<div id="destino" contentEditable="true">
</div>

    • 40

  2. В качестве дополнения вы можете взглянуть на библиотеку clipboard.js , которая, как упоминает @Alvaro, использует execCommand , поэтому, согласно странице библиотеки, она работает в Chrome 42+, Firefox 41+, IE 9+ и Opera 29. +.

    Это не работает для Safari, но когда вы пробуете его на iPad, он выбирает текст input, показывая при этом собственный вариант его копирования.

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

    var clipboard = new Clipboard('.btn');
    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.3/dist/clipboard.min.js"></script>
<!-- Objetivo -->
<input id="foo" value="Texto a copiar">

<!-- Disparador -->
<button class="btn" data-clipboard-target="#foo">
  Copiar al portapapeles
</button>

    • 11

  3. это будет то же самое, что и у другого парня выше, но вместо ввода текстовая область, чтобы отступ уважал вас, если у вас более одной строки

    function copiarAlPortapapeles(id_elemento) {

  // Crea un campo de texto "oculto", este por un textarea

  var aux = document.createElement("textarea");

  // Asigna el contenido del elemento especificado al valor del campo
  // este para vaciar el contenido

  aux.innerHTML = document.getElementById(id_elemento).innerHTML

  // Añade el campo a la página
  document.body.appendChild(aux);

  // Selecciona el contenido del campo
  aux.select();

  // Copia el texto seleccionado
  document.execCommand("copy");

  // Elimina el campo de la página
  document.body.removeChild(aux);

}
    • 3

  4. Здравствуйте, мне было интересно, можно ли инкапсулировать то, что нужно скопировать.

    function copyToClipboard(elemento) {
  var $temp = $("<input>")
  $("body").append($temp);
  $temp.val($(elemento).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p1">
    <p>Soy el primer párrafo</p>
    <p>Soy el segundo párrafo</p>
    <div>tag,tag,tag,tag</div>
</div>

    <button onclick="copyToClipboard('#p1')">Copiar P1</button>
 
    <br/>
    <br/>
    <input type="text" placeholder="Pega aquí para probar" />
    • 0