Як скопіювати текст у 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 альтернатива Flash-ZeroClipboard для безпечного копіювання даних у буфер обміну?

• Скопіюйте у буфер обміну без спалаху

Internet Explorer і Firefox використовували нестандартні API для доступу до буфера обміну, але їх більш сучасні версії вичерпали ці методи (можливо, з міркувань безпеки).

Існує зароджується стандарти зусилля , щоб спробувати придумати «безпечний» спосіб вирішення найбільш поширених проблем з буфером обміну (можливо , що вимагають дії конкретного користувача , як рішення спалаху потрібно), і схоже , що він може бути частково реалізовані в останніх версії 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
• Сафарі 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" />

Зауважте, що ми передаємо ідентифікатор без #.

Як повідомив 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, а навпаки.

Простота - це найвища витонченість.
Якщо ви не хочете, щоб текст, який підлягає копіюванню, був видимим:

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 Code

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

Це найпростіший варіант вирішення цього питання

Ще кращим підходом без спалаху чи будь-яких інших вимог є clipboard.js . Все, що вам потрібно зробити, - це додати data-clipboard-target="#toCopyElement"будь-яку кнопку, ініціалізувати її, new Clipboard('.btn');і вона скопіює вміст DOM з id 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'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>

Буфер обміну-полівБібліотека - це заповнення сучасного API асинхронного буфера обміну на базі Promise.

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

npm install clipboard-polyfill 

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

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

приклад

Я використовую його в комплекті require("babel-polyfill");і протестую на хромі 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 КОД:

     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>

ЖИТТЯ: https://paulund.co.uk/jquery-copy-clipboard