Обновление 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();
}
Вот как это работает:
- Создает временно скрытое текстовое поле.
- Копирует содержимое элемента в это текстовое поле.
- Выбирает содержимое текстового поля.
- Выполняет команду копирования , как:
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" />
Обратите внимание, что мы передаем идентификатор без # сейчас.
Как сообщил Мадзохан в комментариях ниже, в некоторых случаях возникает проблема с 64-разрядной версией Google Chrome (локальный запуск файла). Эта проблема, кажется, решена с помощью решения не-jQuery выше.
Мадзохан попробовал в 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>