Copia / metti il ??testo negli appunti con FireFox, Safari e Chrome
https://stackoverflow.com/questions/127040
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
In Internet Explorer posso usare l'oggetto ClipboardData per accedere agli Appunti. Come posso farlo in FireFox, Safari e / o Chrome?
Soluzione
Ora c'è un modo per farlo facilmente nella maggior parte dei browser moderni usando
document.execCommand('copy');
Questo copierà il testo attualmente selezionato. Puoi selezionare un textArea o un campo di input usando
document.getElementById('myText').select();
Per copiare in modo invisibile il testo è possibile generare rapidamente un textArea, modificare il testo nella casella, selezionarlo, copiarlo e quindi eliminare il textArea. Nella maggior parte dei casi questo textArea non lampeggia nemmeno sullo schermo.
Per motivi di sicurezza, i browser ti permetteranno di copiare solo se un utente intraprende un qualche tipo di azione (es. facendo clic su un pulsante). Un modo per farlo sarebbe quello di aggiungere un evento onClick a un pulsante html che chiama un metodo che copia il testo.
Un esempio completo sembrerebbe
<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>
Altri suggerimenti
Per motivi di sicurezza, Firefox non consente di inserire testo negli Appunti. Tuttavia, è disponibile una soluzione alternativa utilizzando 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;
}
L'unico svantaggio è che questo richiede l'attivazione di Flash.
la fonte è attualmente morta: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2 -cc6c-4ebf-9724-d23e8bc5ad8a / (e così è Cache di Google )
I fogli di calcolo online agganciano gli eventi Ctrl + C, Ctrl + V e trasferiscono lo stato attivo su un controllo TextArea nascosto e impostano il contenuto sui nuovi contenuti degli appunti desiderati per la copia o leggono il contenuto dopo che l'evento è terminato per incollare.
vedi anche È possibile leggere gli appunti in Firefox, Safari e Chrome utilizzando Javascript?
È estate 2015 e con così tante turbolenze attorno a Flash ho pensato di aggiungere una nuova risposta a questa domanda che ne evitasse del tutto l'uso.
clipboard.js è una bella utility che consente di copiare negli Appunti testo o dati HTML. È molto facile da usare, basta includere .js e usare qualcosa del genere:
<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 è anche su GitHub
Nel 2017 puoi farlo (dicendo questo perché questa discussione ha quasi 9 anni!)
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 ora per copiare copyStringToClipboard ('Hello World')
Se hai notato la riga setData e ti sei chiesto se puoi impostare diversi tipi di dati, la risposta è sì.
Firefox ti consente di archiviare i dati negli Appunti, ma per motivi di sicurezza è disabilitato per impostazione predefinita. Scopri come abilitarlo in " Concessione dell'accesso JavaScript negli appunti " nella knowledge base di Mozilla Firefox.
La soluzione offerta da amdfan è la migliore se hai molti utenti e la configurazione del loro browser non è un'opzione. Sebbene sia possibile verificare se gli Appunti sono disponibili e fornire un collegamento per modificare le impostazioni, se gli utenti sono esperti di tecnologia. L'editor JavaScript TinyMCE segue questo approccio.
La funzione copyIntoClipboard () funziona per Flash 9, ma sembra essere stata interrotta dal rilascio di Flash Player 10. Ecco una soluzione che funziona con il nuovo flash player:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
È una soluzione complessa, ma funziona.
Devo dire che nessuna di queste soluzioni realmente funziona. Ho provato la soluzione degli Appunti dalla risposta accettata e non funziona con Flash Player 10. Ho anche provato ZeroClipboard e ne sono rimasto molto soddisfatto per un po '.
Attualmente lo sto usando sul mio sito ( http://www.blogtrog.com ) , ma ho notato strani bug con esso. Il modo in cui ZeroClipboard funziona è che inserisce un oggetto flash invisibile nella parte superiore di un elemento della tua pagina. Ho scoperto che se il mio elemento si sposta (come quando l'utente ridimensiona la finestra e ho le cose allineate a destra), l'oggetto flash ZeroClipboard esce dalla botta e non copre più l'oggetto. Sospetto che probabilmente sia ancora seduto dov'era in origine. Hanno un codice che dovrebbe fermarlo o reinserirlo nell'elemento, ma non sembra funzionare bene.
Quindi ... nella prossima versione di BlogTrog, credo che seguirò l'esempio con tutti gli altri evidenziatori di codice che ho visto in natura e rimuoverò il mio pulsante Copia negli Appunti. : - (
(Ho notato che ora anche Copia negli Appunti di dp.syntaxhiglighter è rotto.)
domanda troppo vecchia ma non ho visto questa risposta da nessuna parte ...
Controlla questo link:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
come hanno detto tutti, per motivi di sicurezza è disabilitato di default. il link sopra mostra le istruzioni su come abilitarlo (modificando about: config in firefox o user.js).
Fortunatamente c'è un plugin chiamato " AllowClipboardHelper " che semplifica le cose con pochi clic. tuttavia devi comunque istruire i visitatori del tuo sito Web su come abilitare l'accesso in firefox.
Ho usato Clippy di Github per le mie esigenze, semplice pulsante basato su Flash. Funziona bene, se uno non ha bisogno di uno stile ed è contento di inserire cosa incollare sul lato server in anticipo.
Usa modern document.execCommand (" copia ") e jQuery. Vedi questa risposta 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();
}};
Come chiamare:
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>
Un leggero miglioramento della soluzione Flash consiste nel rilevare il flash 10 usando swfobject:
http://code.google.com/p/swfobject/
e quindi se viene visualizzato come flash 10, prova a caricare un oggetto Shockwave utilizzando JavaScript. Shockwave può leggere / scrivere negli appunti (in tutte le versioni) e anche usando il comando copyToClipboard () in gergo.
Anche ZeroClipboard è stato aggiornato per evitare il bug menzionato sullo scorrimento della pagina che impedisce al filmato Flash di trovarsi più nella posizione corretta.
Dal momento che quel metodo " Richiede " l'utente di fare clic su un pulsante per copiarlo è una comodità per l'utente e non si verifica nulla di dannoso.
Se supporti Flash puoi usare https://everyplay.com/assets/clipboard.swf e usa il testo flashvars per impostare il testo
https://everyplay.com/assets/clipboard.swf?text= si% 20Works
Quello è quello che uso per copiare e puoi impostare come extra se non supporta queste opzioni che puoi usare:
Per Internet Explorer: window.clipboardData.setData (DataFormat, Text) e window.clipboardData.getData (DataFormat)
È possibile utilizzare Text e Url di DataFormat per getData e setData.
E per cancellare i dati:
Puoi usare File, HTML, Immagine, Testo e URL di DataFormat. PS: devi usare window.clipboardData.clearData (DataFormat);
E per altri che non supportano i file window.clipboardData e swf flash puoi anche usare il tasto control + c sulla tastiera per windows e per mac il suo comando + c
Dal codice addon:
Nel caso in cui qualcun altro stesse cercando come farlo dal codice Chrome, è possibile utilizzare l'interfaccia nsIClipboardHelper come descritto qui: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Usa document.execCommand ('copia') . Supportato nelle ultime versioni di 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>
prova a creare una variabile globale di memoria che memorizza la selezione, quindi l'altra funzione può accedere alla variabile e fare un incolla ad esempio ..
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);
}
API per appunti è progettato per sostituire document.execCommand . Safari sta ancora lavorando sul supporto, quindi è necessario fornire un fallback fino a quando le specifiche non si stabiliscono e Safari termina l'implementazione.
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>
Per motivi di sicurezza negli Appunti Autorizzazioni potrebbe essere necessario leggere e scrivere dagli appunti. Se lo snippet non funziona su SO, provalo su localhost o su un dominio altrimenti attendibile.
