without - html5 copy to clipboard

¿Alternativa HTML5 a ZeroClipboard basado en flash para la copia segura de datos al portapapeles?

Question

Con el flash en el camino de salida en muchos entornos (iPhone, Android, IE10, etc.), ¿hay alguna solución nueva en los navegadores que permita una copia segura de la información en el portapapeles sin flash instalado?

He estado usando ZeroClipboard hasta ahora, pero me preocupan más espectadores que no tienen flash y esta funcionalidad se va a romper y me encantaría no depender de Flash siempre que sea posible.

Answer 1

Creé una solución de JavaScript pura llamada clip-j. Here está. Básicamente lo que hace es aprovechar document.execCommand(''copy''); con algunos otros comandos que lo hacen para que no vea nada. Aquí está el código:

function clip(text) {   
    var copyElement = document.createElement(''input'');      
    copyElement.setAttribute(''type'', ''text'');   
    copyElement.setAttribute(''value'', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand(''copy'');   
    copyElement.remove();
}

Answer 2

El razonamiento es que la copia automática en el portapapeles puede ser muy peligrosa, por lo que la mayoría de los navegadores (excepto IE) * lo dificultan a menos que use el flash.

Al igual que su ZeroClipboard , hay Clipboard LMCButton que también usa un pequeño script flash ejecutándose en segundo plano.

Una solución común sería hacer esto:

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

Que encontré de Jarek Milewski cuando alguien más hizo la pregunta aquí

* Sí, encontré una solución para IE, pero no funciona en la mayoría de los navegadores modernos. Consulte aquí .

Answer 3

Hay excelentes respuestas a esta pregunta , y elegí usar este fragmento:

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Sin embargo, si hay selección de arranque en su página, la línea $temp.val($(element).text()).select() arrojará un error:

Widget solo puede funcionar en elementos seleccionados

Puede utilizar .trigger(''select'') lugar, como se indica en la documentación de jQuery para .select () , así:

$temp.val($(element).val()).trigger(''select'');

Answer 4

Para usar execCommand, primero debe seleccionar () algo en la página, de modo que no solo copie lo que se colocó por última vez en el portapapeles. Con esta función, transfiero la identificación del cuadro de texto de entrada a la función y la selecciono (), luego realizo el comando de copia. No es necesario agregar oyentes ni complicar aún más tu código. El document.execCommand () devuelve falso si no está habilitado o no es compatible, por lo tanto, puede usar window.prompt como método de respaldo.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert(''Link copied to clipboard'');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

Utilice una etiqueta de anclaje "a" estándar con un onclick = "copyToClipboard (''some_id'')"

Answer 5

Puede ver esta publicación en el blog para una discusión en profundidad sobre cómo trabajar con el portapapeles en HTML5. Lamentablemente, aún no puede copiar de forma portátil al portapapeles al hacer clic. Sin embargo, para Chrome y Firefox puedes crear una extensión de navegador que pueda dar permiso a tu sitio para acceder al portapapeles, y creo que IE te permitirá copiar al portapapeles, pero solicitará al usuario que conceda permiso.

Actualización :

Según esto: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+ e IE 9+ admiten el comando de copiado con execCommand. Para Firefox y Chrome, solo funcionará si se desencadena por una acción del usuario, como un clic, y para IE le dará al usuario un cuadro de diálogo de advertencia pidiéndole permiso para copiar al portapapeles.

Answer 6

Sé que esta respuesta llega un poco tarde, pero ahora hay una nueva alternativa moderna a ZeroClipboard (que está basado en Flash). Clipboard.js es una alternativa de JavaScript pura de 2kB que no tiene dependencias .