существует еще один способ без вспышки (кроме буфер обмена API упомянутые в jfriend00 это!--20-->). Вам нужно выбрать текст, а затем выполнить команду 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
• сафари 10

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

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

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

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

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

UPDATE: КОПИРОВАТЬ СОХРАНЯЯ ТЕКСТОВЫЙ ФОРМАТ

как пользователь указал в испанской версии 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>

буфер обмена.js - хорошая утилита, которая позволяет копировать текст или HTML-данные в буфер обмена без использования вспышки. Он очень прост в использовании; просто включите .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>

буфер обмена.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());

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

одно ограничение, хотя это не работает на safari, но он работает на всех других браузерах, включая мобильные браузеры, как он не использует 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's standard dummy text ever since the 1500s</p>

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

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

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

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

простота является конечной сложности.
Если вы не хотите, чтобы текст, подлежащий копированию, был виден:

библиотека 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>

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

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

https://clipboardjs.com/

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

вот почему буфер обмена.Яш существует.

или

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

библиотека ZeroClipboard предоставляет простой способ копирования текста в буфер обмена с использованием невидимого Adobe Flash movie и 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> на наших страницах.

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:

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

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

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

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

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

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

npm install clipboard-polyfill 

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

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

пример

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

простое решение на jQuery.

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

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

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

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>

1. JQUERY:

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