Нажмите кнопку Копировать в буфер обмена с помощью 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, он должен быть вставлен.
17 ответов
редактировать с 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/
и вы также можете получить встроенную библиотеку, которая делает это для вас с буфер обмена.js.
старая, историческая часть ответа
прямое копирование в буфер обмена через JavaScript не разрешено любым современным браузером по соображениям безопасности. Наиболее распространенным обходным путем является использование возможности Flash для копирования в буфер обмена, который может быть вызван только прямым щелчком пользователя.
как уже упоминалось, ZeroClipboard - популярный набор кода для управления Flash-объектом для копирования. Я им пользовался. Если Flash установлен на устройстве просмотра (что исключает мобильный телефон или планшет), он работает.
следующая наиболее распространенная работа просто поместите текст с буфером обмена в поле ввода, переместите фокус в это поле и посоветуйте пользователю нажать Ctrl + C для копирования текста.
другие обсуждения проблемы и возможные обходные пути можно найти в этих предыдущих сообщениях переполнения стека:
эти вопросы, задающие современную альтернативу использованию Flash, получили много вопросов и ответов с решением (вероятно, потому, что их нет):
Internet Explorer и Firefox использовали нестандартные API для доступа к буферу обмена, но их более современные версии устарели эти методы (возможно, по соображениям безопасности).
есть нарождающихся сил стандартов попытаться придумать "безопасный" способ решения наиболее распространенные проблемы с буфером обмена (вероятно, требующие определенного действия пользователя, такого как Flash-решение), и похоже, что он может быть частично реализован в последних версиях Firefox и Chrome, но я еще не подтвердил это.
существует еще один способ без вспышки (кроме буфер обмена API упомянутые в jfriend00 это!--20-->). Вам нужно выбрать текст, а затем выполнить команду 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
- сафари 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>
<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 для легкой реализации цели копирования!
копирование текста в буфер обмена не должно быть трудно. Это не должно требовать десятки шагов для настройки или сотни KBs для загрузки. Но большинство все, это не должно зависеть от Flash или какой-либо раздутой структуры.
вот почему буфер обмена.Яш существует.
или
https://github.com/zeroclipboard/zeroclipboard
библиотека 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
" файл должен быть в той же папке, что и ваш файл, используя эту функцию есть, или вы должны включить, как мы включаем <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>
буфер обмена-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();
оба будут работать как шарм :),
-
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: