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

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

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

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

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

Здесь вы можете увидеть краткую демонстрацию:

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" />

Обратите внимание, что мы передаем id без # now.

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

Madzohan попробовал в 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, а наоборот.

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

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());

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

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

$(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 standard dummy text ever since the 1500s</p>

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

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

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;"><input>

<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();
}

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

 <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'));
                    });

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

https://clipboardjs.com/

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

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

или

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

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

<!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>

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

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

</script>

Для CDN файлов

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

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

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

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

npm install clipboard-polyfill 

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

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

пример

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

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

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

Большинство предложенных ответов создают дополнительный временный скрытый элемент ввода. Поскольку большинство браузеров в настоящее время поддерживают редактирование содержимого 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>

Простое решение jQuery.

Должно быть вызвано щелчком пользователя.

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

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);
                    }

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

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

1. 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>

2. Jquery:

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