Atualização 2020 : Esta solução usa execCommand. Enquanto esse recurso estava bom no momento de escrever esta resposta, agora é considerado obsoleto . Ele ainda funcionará em muitos navegadores, mas seu uso é desencorajado, pois o suporte pode ser descartado.
Existe outra maneira não-Flash (além da API da área de transferência mencionada na resposta de jfriend00 ). Você precisa selecionar o texto e, em seguida, executar o comandocopy para copiar para a área de transferência, independentemente do texto selecionado atualmente na página.
Por exemplo, esta função copiará o conteúdo do elemento passado para a área de transferência (atualizada com a sugestão dos comentários do PointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
É assim que funciona:
- Cria um campo de texto temporariamente oculto.
- Copia o conteúdo do elemento para esse campo de texto.
- Seleciona o conteúdo do campo de texto.
- Executa a cópia comando como:
document.execCommand("copy").
- Remove o campo de texto temporário.
Você pode ver uma demonstração rápida aqui:
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" />
O principal problema é que nem todos os navegadores suportam esse recurso no momento, mas você pode usá-lo nos principais:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
Atualização 1: Isso também pode ser alcançado com uma solução JavaScript pura (sem 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" />
Observe que passamos o ID sem o # agora.
Como madzohan relatou nos comentários abaixo, há alguns problemas com a versão de 64 bits do Google Chrome em alguns casos (executando o arquivo localmente). Esse problema parece ter sido corrigido com a solução não-jQuery acima.
Madzohan tentou no Safari e a solução funcionou, mas usando em document.execCommand('SelectAll')vez de usar .select()(como especificado no bate-papo e nos comentários abaixo).
Como o PointZeroTwo aponta nos comentários , o código pode ser aprimorado para retornar um resultado de sucesso / falha. Você pode ver uma demonstração neste jsFiddle .
ATUALIZAÇÃO: COPIAR MANTER O FORMATO DO TEXTO
Como um usuário apontou na versão em espanhol do StackOverflow , as soluções listadas acima funcionam perfeitamente se você deseja copiar o conteúdo de um elemento literalmente, mas não funcionam muito bem se você deseja colar o texto copiado com o formato (como é copiado para um input type="text", o formato é "perdido").
Uma solução para isso seria copiar para um conteúdo editável dive copiá-lo usando o de execCommandmaneira semelhante. Aqui está um exemplo - clique no botão copiar e cole na caixa editável do conteúdo abaixo:
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>
E no jQuery, seria assim:
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>