it-swarm.com.ru

Нажмите кнопку скопировать в буфер обмена с помощью jQuery

Как мне скопировать текст внутри 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, это должно быть вставлено.

381
Dishan TD

Изменить с 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 скопировать текст.

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


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


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


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

428
jfriend00

Есть и другой не Flash-способ (кроме Clipboard 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. Выполняет команду copy следующим образом: 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" />

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

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

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

Как указывает PointZeroTwo в комментариях , код можно улучшить, чтобы он возвращал результат успеха/неудачи. Вы можете увидеть демо на this 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>

517
Alvaro Montoro

clipboard.js - это утилита Nice, которая позволяет копировать текстовые или 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, а наоборот. 

34
a coder

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

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());
10
David from Studio.201

Еще лучший подход без 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>

7
Amgad

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

. .__ 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>
6
Nadav
<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();
}
4
Nayan Hodar
<!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>
4
Ujjwal Kumar Gupta

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

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

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

Это 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");
}

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

3
keivan kashani

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

https://clipboardjs.com/

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

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

или же

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

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

3
xgqfrms

Копируемый текст вводится в текст, например: <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

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

2
Sydney Buildings

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

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

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

вы можете скопировать отдельный текст отдельно от текста 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();
            }
        };
1
Alper Ebicoglu

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

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

1
harshal lonare

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);
                    }
1
li bing zhao

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

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

npm install clipboard-polyfill 

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

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

пример

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

1
Yevgeniy Afanasyev

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

1
Mark Lancaster

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

1
Jeffrey Kilelo