Copiar / Colocar texto na área de transferência com o Firefox, Safari e Chrome
https://stackoverflow.com/questions/127040
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
No Internet Explorer I pode usar o objeto clipboardData para acessar a área de transferência. Como posso fazer isso no Firefox, Safari e / ou Chrome?
Solução
Existe agora uma maneira de fazer isso facilmente na maioria dos navegadores modernos usando
document.execCommand('copy');
Isto irá copiar o texto selecionado no momento. Você pode selecionar um campo textArea ou entrada usando
document.getElementById('myText').select();
Para copiar invisível texto que você pode rapidamente gerar um textArea, modificar o texto na caixa, selecioná-lo, copiá-lo e, em seguida, excluir o textArea. Na maioria dos casos este textArea não vai sequer piscar na tela.
Por razões de segurança, os navegadores só irá permitir que você copiar se um usuário tem algum tipo de ação (ie. Clicar em um botão). Uma maneira de fazer isso seria para adicionar um evento onClick de um botão HTML que chama um método que copia o texto.
Um exemplo completo seria parecido
<html>
<head>
<title>copy test</title>
</head>
<body>
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
<script>
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
</script>
</body>
</html>
Outras dicas
Por razões de segurança, o Firefox não permite que você para colocar o texto na área de transferência. No entanto, há uma solução alternativa disponível usando o Flash.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
A única desvantagem é que isso requer o Flash para ser habilitado.
fonte é atualmente mortos: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2 -cc6c-4ebf-9724-d23e8bc5ad8a / (e assim é de Google cache de )
planilhas on-line ligar eventos e foco transferência para um controle TextArea oculta e defina seu conteúdo para novos conteúdos da área de transferência desejados para cópia Ctrl + C, Ctrl + V ou ler o seu conteúdo após o evento tinha acabado para colar.
ver também é possível ler a área de transferência no Firefox, Safari e Chrome usando Javascript?
É Verão de 2015, e com tanta turbulência em torno do Flash eu pensei em adicionar uma nova resposta a esta pergunta, que evita o seu uso por completo.
clipboard.js é um utilitário agradável que permite a cópia de texto ou html dados para a área de transferência. É muito fácil de usar, basta incluir o js e usar algo como isto:
<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 também está em GitHub
Em 2017 você pode fazer isso (dizendo isso porque esta discussão é quase 9 anos de idade!)
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
E agora para copiar copyStringToClipboard('Hello World')
Se você notou a linha setData, e se perguntou se você pode definir diferentes tipos de dados a resposta é sim.
O Firefox não permite que você armazene dados na área de transferência, mas devido a implicações de segurança é desativado por padrão. Veja como ativá-lo no "Concedendo acesso JavaScript para o " prancheta na base de conhecimento Mozilla Firefox.
A solução oferecida pela amdfan é a melhor se você está tendo um monte de usuários e configurar o seu navegador não é uma opção. Embora você poderia testar se a área de transferência está disponível e fornecer um link para alterar as configurações, se os usuários estão tech galopante. O editor JavaScript TinyMCE segue esta abordagem.
O copyIntoClipboard () funciona de função para Flash 9, mas parece estar quebrado pelo lançamento do Flash Player 10. Aqui está uma solução que funciona com o novo flash player:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
É uma solução complexa, mas ela não funciona.
Eu tenho que dizer que nenhuma dessas soluções realmente trabalho. Eu tentei a solução prancheta da resposta aceita, e ele não funciona com o Flash Player 10. Tenho também tentou ZeroClipboard, e eu estava muito feliz com ele por algum tempo.
Atualmente estou usando no meu próprio site ( http://www.blogtrog.com ) , mas eu tenho observado erros estranhos com ele. A maneira ZeroClipboard funciona é que ele coloca um objeto flash invisível sobre a parte superior de um elemento em sua página. Descobri que, se meu elemento movimentos (como quando o usuário redimensiona a janela e eu tenho as coisas direito alinhados), o objeto flash ZeroClipboard fica fora de bater e não é mais cobrindo o objeto. Eu suspeito que provavelmente ainda está sentado onde estava originalmente. Eles têm código que deveria parar com isso, ou restick-lo para o elemento, mas não parecem funcionar bem.
Então ... na próxima versão do BlogTrog, acho que vou seguir o exemplo com todos os outros marcadores de código que eu vi em estado selvagem e remover meu botão Copiar para área de transferência. : - (
(notei cópia desse dp.syntaxhiglighter a área de transferência está quebrado agora também.)
velho demais pergunta, mas eu não vi essa resposta em qualquer lugar ...
Confira neste link:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
como todos disseram, por razões de segurança é por padrão desativado. no link acima mostra as instruções de como ativá-lo (editando about: config no Firefox ou os user.js).
Felizmente, existe um plugin chamado "AllowClipboardHelper" que torna as coisas mais fáceis com apenas alguns cliques. no entanto você ainda precisa instruir os visitantes do seu site sobre como habilitar o acesso no Firefox.
Eu usei Clippy para minhas necessidades, simples botão baseado em Flash do Github. Funciona muito bem, se não é preciso modelar e está satisfeito com a inserção de o que para colar no lado do servidor de antemão.
Use Document.ExecCommand moderna ( "copy") e jQuery. Veja esta resposta stackoverflow
var ClipboardHelper = { // as Object
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();
}};
Como chamar:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body=$('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn=$(this);
var text=$btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>
A ligeira melhoria sobre a solução do Flash é detectar para o flash 10 utilizando swfobject:
http://code.google.com/p/swfobject/
e, em seguida, se mostra como o Flash 10, tente carregar um objecto da inquietação usando JavaScript. Shockwave pode ler / escrever para a área de transferência (em todas as versões), bem usando o comando CopyToClipboard () na linguagem.
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp trabalhos com flash 10 e todo o flash habilitado navegadores.
Além disso ZeroClipboard foi atualizado para evitar o bug mencionado sobre a página de rolagem fazendo com que o filme do Flash para não mais estar no lugar correto.
Uma vez que o método "Requer" o usuário a clicar em um botão para copiar esta é uma conveniência para o nefasto usuário e nada está ocorrendo.
Se você suporte a Flash, você pode usar https://everyplay.com/assets/clipboard.swf e usar o texto flashvars para definir o texto
https://everyplay.com/assets/clipboard.swf?text= Ela% 20Works
Isso é o que eu uso para copiar e você pode definir como extra, se não suporta estas opções você pode usar:
Para o Internet Explorer: window.clipboardData.setData (DataFormat, Texto) e window.clipboardData.getData (DataFormat)
Você pode usar o texto da DataFormat e Url para getData e setData.
E para dados delete:
Você pode usar Arquivo do DataFormat, HTML, imagem, texto e URL. PS: Você precisa usar window.clipboardData.clearData (DataFormat);
E para outros isso não é apoiar window.clipboardData e arquivos SWF Flash, você também pode usar o controle de botão + c do seu teclado para Windows e para Mac seu comando + c
a partir do código addon:
Em caso de alguém estava à procura de como fazê-lo a partir de cromo código, você pode usar a interface nsIClipboardHelper como descrito aqui: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Use document.execCommand('copy'). Compatível com as versões mais recentes de Chrome, Firefox, Edge e Safari.
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
tente criar uma variável global memória que armazena a seleção, em seguida, a outra função pode acessar a variável e fazer uma pasta, por exemplo ..
var memory = '';//outside the functions but within the script tag.
function moz_stringCopy(DOMEle,firstPos,secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);
}
Clipboard API é projetado para substituir document.execCommand . Safari ainda está trabalhando no suporte para que você deve fornecer um retorno até liquida de especificação e Safari termina implementação.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>
Por razões de segurança prancheta Permissions pode ser necessário para ler e escrever a partir da área de transferência. Se o trecho não funciona no SO dar-lhe um tiro na localhost ou um domínio de outra forma confiável.
