Как мне скопировать текст внутри div в буфер обмена? У меня есть div и мне нужно добавить ссылку, которая добавит текст в буфер обмена. Есть ли решение для этого?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

После того, как я нажму кнопку «Копировать текст», затем нажму « Ctrl+» V, она должна быть вставлена.

Редактировать с 2016 года

Начиная с 2016 года, теперь вы можете копировать текст в буфер обмена в большинстве браузеров, потому что большинство браузеров имеют возможность программно копировать выделенный текст в буфер обмена, используя document.execCommand("copy")этот вариант .

Как и в случае некоторых других действий в браузере (например, открытие нового окна), копирование в буфер обмена может быть выполнено только с помощью определенного действия пользователя (например, щелчка мыши). Например, это не может быть сделано через таймер.

Вот пример кода:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Вот немного более продвинутая демонстрация: https://jsfiddle.net/jfriend00/v9g1x0o6/

И вы также можете получить готовую библиотеку, которая сделает это за вас с clipboard.js .

Старая, историческая часть ответа

Прямое копирование в буфер обмена с помощью JavaScript не разрешено никаким современным браузером из соображений безопасности. Наиболее распространенный обходной путь - использование возможности Flash для копирования в буфер обмена, которая может быть вызвана только прямым щелчком пользователя.

Как уже упоминалось, ZeroClipboard - это популярный набор кода для управления объектом Flash, который выполняет копирование. Я использовал это. Если Flash установлен на устройстве просмотра (которое исключает мобильный или планшет), это работает.

Следующий наиболее распространенный обходной путь - просто поместить связанный с буфером обмена текст в поле ввода, переместить фокус на это поле и посоветовать пользователю нажать Ctrl+, Cчтобы скопировать текст.

Другие обсуждения проблемы и возможные обходные пути можно найти в этих предыдущих сообщениях переполнения стека:

• Как мне скопировать в буфер обмена в JavaScript?

• Как скопировать текст в буфер обмена клиента с помощью jQuery?

• Как вы можете скопировать в буфер без Flash?

Эти вопросы, требующие современной альтернативы использованию Flash, получили множество положительных отзывов и не получили ответов с решением (вероятно, потому что ни один не существует):

• HTML5 альтернатива флеш-памяти ZeroClipboard для безопасного копирования данных в буфер обмена?

• Копировать в буфер без Flash

У Internet Explorer и Firefox были нестандартные API для доступа к буферу обмена, но их более современные версии не рекомендовали эти методы (возможно, по соображениям безопасности).

В зарождающихся стандартах предпринимаются попытки найти «безопасный» способ решения наиболее распространенных проблем с буфером обмена (вероятно, требующих определенных действий пользователя, таких как решение Flash), и похоже, что он может быть частично реализован в последней версии. версии Firefox и Chrome, но я еще не подтвердил это.

Обновление 2020 : это решение использует execCommand. Хотя на момент написания этого ответа эта функция работала нормально, теперь она считается устаревшей . Он по-прежнему будет работать во многих браузерах, но его использование не рекомендуется, так как поддержка может быть прекращена.

Существует еще один способ, отличный от Flash (кроме API буфера обмена, упомянутого в ответе jfriend00 ). Вам нужно выделить текст, а затем выполнить команду,copy чтобы скопировать в буфер обмена любой текст, выбранный в данный момент на странице.

Например, эта функция скопирует содержимое переданного элемента в буфер обмена (обновлено с предложением в комментариях от PointZeroTwo ):

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

Вот как это работает:

1. Создает временно скрытое текстовое поле.
2. Копирует содержимое элемента в это текстовое поле.
3. Выбирает содержимое текстового поля.
4. Выполняет команду копирования , как: document.execCommand("copy").
5. Удаляет временное текстовое поле.

Вы можете увидеть быстрое демо здесь:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

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

• Chrome 43
• Internet Explorer 10
• Firefox 41
• Safari 10

Обновление 1: Это может быть достигнуто также с помощью чистого решения JavaScript (без jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Обратите внимание, что мы передаем идентификатор без # сейчас.

Как сообщил Мадзохан в комментариях ниже, в некоторых случаях возникает проблема с 64-разрядной версией Google Chrome (локальный запуск файла). Эта проблема, кажется, решена с помощью решения не-jQuery выше.

Мадзохан попробовал в Safari, и решение работало, но использовалось document.execCommand('SelectAll')вместо использования .select()(как указано в чате и в комментариях ниже).

Как указывает PointZeroTwo в комментариях , код можно улучшить, чтобы он возвращал результат успеха / неудачи. Вы можете увидеть демо на этом jsFiddle .

ОБНОВЛЕНИЕ: КОПИЯ, СОХРАНЯЯ ФОРМАТ ТЕКСТА

Как указал пользователь в испанской версии StackOverflow , перечисленные выше решения отлично работают, если вы хотите буквально скопировать содержимое элемента, но не очень хорошо работают, если вы хотите вставить скопированный текст с форматом (как это скопировано в input type="text", формат "потерян").

Решением для этого было бы скопировать в редактируемый контент, divа затем скопировать его, используя execCommandаналогичным образом. Здесь есть пример - нажмите на кнопку копирования, а затем вставьте в поле для редактирования контента ниже:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

А в jQuery это было бы так:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

clipboard.js - хорошая утилита, которая позволяет копировать текстовые или HTML-данные в буфер обмена без использования Flash. Это очень легко использовать; просто включите .js и используйте что-то вроде этого:

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js также есть на GitHub .

Изменение от 15 января 2016 года. Верхний ответ был отредактирован сегодня для ссылки на тот же API в моем ответе, опубликованном в августе 2015 года. В предыдущем тексте было указание пользователям использовать ZeroClipboard. Просто хочу прояснить, что я не выдернул это из ответа jfriend00, а наоборот.

Простота есть основа утонченности.
Если вы не хотите, чтобы текст, который нужно скопировать, был виден:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

С разрывами строк (продолжение ответа от Альваро Монторо)

var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

Вы можете использовать этот код для копирования входного значения на странице в буфере обмена, нажав кнопку

Это HTML

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Тогда для этого HTML, мы должны использовать этот код JQuery

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

Это самое простое решение для этого вопроса

Еще лучший подход без flash или каких-либо других требований - это clipboard.js . Все, что вам нужно сделать, это добавить data-clipboard-target="#toCopyElement"любую кнопку, инициализировать ее, new Clipboard('.btn');и она скопирует содержимое DOM с идентификатором toCopyElementв буфер обмена. Это фрагмент, который копирует текст, указанный в вашем вопросе, по ссылке.

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

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

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

Очень важно, чтобы поле ввода не имело display: none. Браузер не будет выделять текст и, следовательно, не будет скопирован. Используйте opacity: 0ширину 0px, чтобы решить проблему.

Это самый простой способ скопировать контент

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

JQuery простое решение.

Должен быть активирован по клику пользователя.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

Вы можете просто использовать эту библиотеку для легкой реализации цели копирования!

https://clipboardjs.com/

Копирование текста в буфер обмена не должно быть трудным. Это не должно требовать десятков шагов для настройки или сотен килобайт для загрузки. Но больше всего это не должно зависеть от Flash или какой-либо раздутой среды.

Вот почему clipboard.js существует.

или

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Библиотека ZeroClipboard обеспечивает простой способ копирования текста в буфер обмена с помощью невидимого фильма Adobe Flash и интерфейса JavaScript.

Текст для копирования находится в текстовом вводе, например: <input type="text" id="copyText" name="copyText"> и при нажатии кнопки выше текст должен быть скопирован в буфер обмена, поэтому кнопка выглядит так: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Ваш сценарий должен быть похож на:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Для файлов CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

примечание : ZeroClipboard.swfи ZeroClipboard.js"файл должен находиться в той же папке, что и ваш файл с использованием этой функции, ИЛИ вы должны включить то, что мы включаем <script src=""></script>в наши страницы.

Большинство из предложенных ответов создают дополнительные временные скрытые элементы ввода. Поскольку в настоящее время большинство браузеров поддерживают редактирование содержимого div, я предлагаю решение, которое не создает скрытый элемент (элементы), сохраняет форматирование текста и использует чистый JavaScript или библиотеку jQuery.

Вот минималистичная реализация скелета, использующая наименьшее количество строк кода, о которых я мог подумать:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

Библиотека Clipboard-polyfill является полифилом для современного API-интерфейса для асинхронного буфера обмена на основе Promise.

установить в CLI:

npm install clipboard-polyfill 

импортировать как буфер обмена в файл JS

window.clipboard = require('clipboard-polyfill');

пример

Я использую его в связке require("babel-polyfill");и проверил на Chrome 67. Все хорошо для производства.

HTML-код здесь

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

JS CODE:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

Вы можете скопировать отдельный текст отдельно от текста HTML-элемента.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

Чистый JS, без встроенного onclick, для парных классов «контент - кнопка копирования». Было бы удобнее, если бы у вас было много элементов)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Поддержка старых браузеров:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Оба будут работать как шарм :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
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().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

Также в HTML,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard