firefox - texto - portapapeles múltiple
Copie/Ponga texto en el portapapeles con Firefox, Safari y Chrome (17)
En Internet Explorer puedo usar el objeto clipboardData para acceder al portapapeles. ¿Cómo puedo hacer eso en Firefox, Safari y / o Chrome?
Ahora hay una manera de hacer esto fácilmente en la mayoría de los navegadores modernos usando
document.execCommand(''copy'');
Esto copiará el texto seleccionado actualmente. Puede seleccionar un campo de texto o de entrada utilizando
document.getElementById(''myText'').select();
Para copiar texto invisible, puede generar rápidamente un área de texto, modificar el texto en el cuadro, seleccionarlo, copiarlo y luego eliminar el área de texto. En la mayoría de los casos, este textArea ni siquiera parpadea en la pantalla.
Por razones de seguridad, los navegadores solo le permitirán copiar si un usuario realiza algún tipo de acción (es decir, hacer clic en un botón). Una forma de hacerlo sería agregar un evento onClick a un botón html que llama a un método que copia el texto.
Un ejemplo completo se vería
<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>
Debo decir que ninguna de estas soluciones realmente funciona. He probado la solución del portapapeles a partir de la respuesta aceptada, y no funciona con Flash Player 10. También he probado ZeroClipboard, y estuve muy contento con esto por un tiempo.
Actualmente lo estoy usando en mi propio sitio ( http://www.blogtrog.com ), pero he notado errores extraños con él. La forma en que funciona ZeroClipboard es que coloca un objeto flash invisible sobre la parte superior de un elemento en su página. Descubrí que si mi elemento se mueve (como cuando el usuario cambia el tamaño de la ventana y tengo las cosas alineadas a la derecha), el objeto flash ZeroClipboard se desajusta y ya no cubre el objeto. Sospecho que probablemente todavía esté sentado donde estaba originalmente. Tienen un código que se supone que detiene eso, o lo cambian al elemento, pero parece que no funciona bien.
Entonces ... en la próxima versión de BlogTrog, supongo que haré lo mismo con todos los demás marcadores de código que he visto en la naturaleza y eliminaré mi botón Copiar al portapapeles. :-(
(Noté que la copia de dp.syntaxhiglighter en el Portapapeles ahora también está rota).
En 2017 puedes hacer esto (decir esto porque este hilo tiene casi 9 años).
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'');
}
Y ahora para copiar copyStringToClipboard(''Hello World'')
Si notó la línea setData y se preguntó si puede establecer diferentes tipos de datos, la respuesta es sí.
Es verano de 2015, y con tanta confusión alrededor de Flash, pensé que agregaría una nueva respuesta a esta pregunta que evita su uso por completo.
clipboard.js es una buena utilidad que permite copiar texto o datos html en el portapapeles. Es muy fácil de usar, solo incluye .js y usa algo como esto:
<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 también está en GitHub
Firefox le permite almacenar datos en el portapapeles, pero debido a las implicaciones de seguridad está deshabilitado de forma predeterminada. Vea cómo habilitarlo en "Otorgar acceso JavaScript al portapapeles" en la base de conocimientos de Mozilla Firefox.
La solución que ofrece amdfan es la mejor si tiene muchos usuarios y la configuración de su navegador no es una opción. Aunque podría probar si el portapapeles está disponible y proporcionar un enlace para cambiar la configuración, si los usuarios son conocedores de la tecnología. El editor de JavaScript TinyMCE sigue este enfoque.
He usado Clippy de Github para mis necesidades, simple botón basado en Flash. Funciona muy bien, si uno no necesita un estilo y está contento con insertar lo que debe pegar en el lado del servidor de antemano.
La función copyIntoClipboard () funciona para Flash 9, pero parece estar rota por el lanzamiento de Flash Player 10. Aquí hay una solución que funciona con el nuevo reproductor flash:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Es una solución compleja, pero funciona.
Las hojas de cálculo en línea enganchan Ctrl + C, Ctrl + V eventos y transfieren el foco a un control oculto de TextArea y configuran sus contenidos en los nuevos contenidos deseados del portapapeles para copiar o leer su contenido una vez que el evento haya finalizado para pegar.
ver también ¿Es posible leer el portapapeles en Firefox, Safari y Chrome usando Javascript?
Por razones de seguridad, Firefox no le permite colocar texto en el portapapeles. Sin embargo, hay una solución alternativa disponible con 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;
}
La única desventaja es que esto requiere que Flash esté habilitado.
la fuente está actualmente muerta: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( y también lo es su caché de Google )
Si admite flash puede usar https://everyplay.com/assets/clipboard.swf y usar el texto de flashvars para establecer el texto
https://everyplay.com/assets/clipboard.swf?text=It%20Works
Esa es la que uso para copiar y puede establecer como extra si no admite estas opciones que puede usar:
Para Internet Explorer: window.clipboardData.setData (DataFormat, Text) y window.clipboardData.getData (DataFormat)
Puede usar TextFormat Text y Url para getData y setData.
Y para borrar datos:
Puede usar el Archivo, HTML, Imagen, Texto y URL de DataFormat. PD: necesita usar window.clipboardData.clearData (DataFormat);
Y para otros que no sean compatibles con los archivos window.clipboardData y swf flash, también puede usar el botón control + c en su teclado para Windows y para mac su comando + c
Una pequeña mejora en la solución Flash es detectar el flash 10 usando swfobject:
http://code.google.com/p/swfobject/
y luego si se muestra como flash 10, intente cargar un objeto Shockwave usando javascript. Shockwave también puede leer / escribir en el portapapeles (en todas las versiones) utilizando el comando copyToClipboard () en lingo.
Use document.execCommand(''copy'') . Compatible con las últimas versiones de Chrome , Firefox , Edge y 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>
Utilice document.execCommand moderno ("copia") y jQuery. Mira esta respuesta stackflow
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 llamar:
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>
es una pregunta demasiado antigua, pero no vi esta respuesta en ningún lado ...
Mira este enlace:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
como todo el mundo dijo, por razones de seguridad está deshabilitado por defecto. el enlace de arriba muestra las instrucciones de cómo habilitarlo (editando about: config en firefox o user.js).
Afortunadamente, hay un complemento llamado "AllowClipboardHelper" que facilita las cosas con solo unos pocos clics. sin embargo, aún debe indicar a los visitantes de su sitio web cómo habilitar el acceso en Firefox.
intente crear una variable global de memoria que almacene la selección, luego la otra función puede acceder a la variable y hacer un pegado, por ejemplo ...
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);
}
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp funciona con Flash 10 y todos los navegadores habilitados para Flash.
Además, se ha actualizado ZeroClipboard para evitar el error mencionado sobre el desplazamiento de la página que hace que la película Flash ya no esté en el lugar correcto.
Dado que ese método "Requiere" que el usuario haga clic en un botón para copiar esto, es una ventaja para el usuario y no ocurre nada nefasto.
Desde el código de complemento:
En caso de que alguien más esté buscando cómo hacerlo desde el código de Chrome, puede usar la interfaz nsIClipboardHelper como se describe aquí: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard